RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 19:07:35 +00:00
Code Issues Activity Actions

LibWeb: Implement CanvasRenderingContext2D.measureText

Browse source 
This requires an implementation of the "text preparation algorithm" as
specified here:

html.spec.whatwg.org/multipage/canvas.html#text-preparation-algorithm

However, we're missing a lot of things such as the
CanvasTextDrawingStyles interface, so most of the algorithm was not
implemented. Additionally, we also are not able to use a LineBox like
the algorithm suggests, because our layouting infra is not up to the
task yet. The prepare_text function does nothing other than figuring out
the width of the given text and return glyphs with offsets at the
moment.
This commit is contained in:
sin-ack 2021-12-30 22:15:38 +00:00 • committed by Linus Groh
parent 732e41714a
commit 9121cc7cae
10 changed files with 253 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

126
Userland/Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
View file

@ -8,10 +8,14 @@
#include <AK/OwnPtr.h>
#include <LibGfx/Painter.h>
#include <LibWeb/Bindings/CanvasRenderingContext2DWrapper.h>
#include <LibWeb/Bindings/WindowObject.h>
#include <LibWeb/DOM/Window.h>
#include <LibWeb/HTML/CanvasRenderingContext2D.h>
#include <LibWeb/HTML/HTMLCanvasElement.h>
#include <LibWeb/HTML/HTMLImageElement.h>
#include <LibWeb/HTML/ImageData.h>
#include <LibWeb/HTML/TextMetrics.h>
#include <LibWeb/Layout/TextNode.h>
namespace Web::HTML {
@ -365,4 +369,126 @@ void CanvasRenderingContext2D::reset_to_default_state()
did_draw(painter->target()->rect().to_type<float>());
}
// https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-measuretext
RefPtr<TextMetrics> CanvasRenderingContext2D::measure_text(String const& text)
{
// The measureText(text) method steps are to run the text preparation
// algorithm, passing it text and the object implementing the CanvasText
// interface, and then using the returned inline box must return a new
// TextMetrics object with members behaving as described in the following
// list:
auto prepared_text = prepare_text(text);
auto metrics = TextMetrics::create();
// FIXME: Use the font that was used to create the glyphs in prepared_text.
auto& font = Gfx::FontDatabase::default_font();
// width attribute: The width of that inline box, in CSS pixels. (The text's advance width.)
metrics->set_width(prepared_text.bounding_box.width());
// actualBoundingBoxLeft attribute: The distance parallel to the baseline from the alignment point given by the textAlign attribute to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.
metrics->set_actual_bounding_box_left(-prepared_text.bounding_box.left());
// actualBoundingBoxRight attribute: The distance parallel to the baseline from the alignment point given by the textAlign attribute to the right side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going right from the given alignment point.
metrics->set_actual_bounding_box_right(prepared_text.bounding_box.right());
// fontBoundingBoxAscent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the ascent metric of the first available font, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
metrics->set_font_bounding_box_ascent(font.baseline());
// fontBoundingBoxDescent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the descent metric of the first available font, in CSS pixels; positive numbers indicating a distance going down from the given baseline.
metrics->set_font_bounding_box_descent(prepared_text.bounding_box.height() - font.baseline());
// actualBoundingBoxAscent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the top of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going up from the given baseline.
metrics->set_actual_bounding_box_ascent(font.baseline());
// actualBoundingBoxDescent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the bottom of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going down from the given baseline.
metrics->set_actual_bounding_box_descent(prepared_text.bounding_box.height() - font.baseline());
// emHeightAscent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the highest top of the em squares in the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the top of that em square (so this value will usually be positive). Zero if the given baseline is the top of that em square; half the font size if the given baseline is the middle of that em square.
metrics->set_em_height_ascent(font.baseline());
// emHeightDescent attribute: The distance from the horizontal line indicated by the textBaseline attribute to the lowest bottom of the em squares in the inline box, in CSS pixels; positive numbers indicating that the given baseline is above the bottom of that em square. (Zero if the given baseline is the bottom of that em square.)
metrics->set_em_height_descent(prepared_text.bounding_box.height() - font.baseline());
// hangingBaseline attribute: The distance from the horizontal line indicated by the textBaseline attribute to the hanging baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the hanging baseline. (Zero if the given baseline is the hanging baseline.)
metrics->set_hanging_baseline(font.baseline());
// alphabeticBaseline attribute: The distance from the horizontal line indicated by the textBaseline attribute to the alphabetic baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the alphabetic baseline. (Zero if the given baseline is the alphabetic baseline.)
metrics->set_font_bounding_box_ascent(0);
// ideographicBaseline attribute: The distance from the horizontal line indicated by the textBaseline attribute to the ideographic-under baseline of the inline box, in CSS pixels; positive numbers indicating that the given baseline is below the ideographic-under baseline. (Zero if the given baseline is the ideographic-under baseline.)
metrics->set_font_bounding_box_ascent(0);
return metrics;
}
// https://html.spec.whatwg.org/multipage/canvas.html#text-preparation-algorithm
CanvasRenderingContext2D::PreparedText CanvasRenderingContext2D::prepare_text(String const& text, float max_width)
{
// 1. If maxWidth was provided but is less than or equal to zero or equal to NaN, then return an empty array.
if (max_width <= 0 || max_width != max_width) {
return {};
}
// 2. Replace all ASCII whitespace in text with U+0020 SPACE characters.
// NOTE: This also replaces vertical tabs with space even though WHATWG
// doesn't consider it as whitespace.
StringBuilder builder { text.length() };
for (auto c : text) {
builder.append(is_ascii_space(c) ? ' ' : c);
}
String replaced_text = builder.build();
// 3. Let font be the current font of target, as given by that object's font attribute.
// FIXME: Once we have CanvasTextDrawingStyles, implement font selection.
// 4. Apply the appropriate step from the following list to determine the value of direction:
// 4.1. If the target object's direction attribute has the value "ltr": Let direction be 'ltr'.
// 4.2. If the target object's direction attribute has the value "rtl": Let direction be 'rtl'.
// 4.3. If the target object's font style source object is an element: Let direction be the directionality of the target object's font style source object.
// 4.4. If the target object's font style source object is a Document with a non-null document element: Let direction be the directionality of the target object's font style source object's document element.
// 4.5. Otherwise: Let direction be 'ltr'.
// FIXME: Once we have CanvasTextDrawingStyles, implement directionality.
// 5. Form a hypothetical infinitely-wide CSS line box containing a single inline box containing the text text, with its CSS properties set as follows:
// 'direction' -> direction
// 'font' -> font
// 'font-kerning' -> target's fontKerning
// 'font-stretch' -> target's fontStretch
// 'font-variant-caps' -> target's fontVariantCaps
// 'letter-spacing' -> target's letterSpacing
// SVG text-rendering -> target's textRendering
// 'white-space' -> 'pre'
// 'word-spacing' -> target's wordSpacing
// ...and with all other properties set to their initial values.
// FIXME: Actually use a LineBox here instead of, you know, using the default font and measuring its size (which is not the spec at all).
// FIXME: Once we have CanvasTextDrawingStyles, add the CSS attributes.
auto& font = Gfx::FontDatabase::default_font();
size_t width = 0;
size_t height = font.glyph_height();
for (auto c : Utf8View { replaced_text }) {
width += font.glyph_or_emoji_width(c);
}
// 6. If maxWidth was provided and the hypothetical width of the inline box in the hypothetical line box is greater than maxWidth CSS pixels, then change font to have a more condensed font (if one is available or if a reasonably readable one can be synthesized by applying a horizontal scale factor to the font) or a smaller font, and return to the previous step.
// FIXME: Record the font size used for this piece of text, and actually retry with a smaller size if needed.
// 7. The anchor point is a point on the inline box, and the physical alignment is one of the values left, right, and center. These variables are determined by the textAlign and textBaseline values as follows:
// Horizontal position:
// 7.1. If textAlign is left, if textAlign is start and direction is 'ltr' or if textAlign is end and direction is 'rtl': Let the anchor point's horizontal position be the left edge of the inline box, and let physical alignment be left.
// 7.2. If textAlign is right, if textAlign is end and direction is 'ltr' or if textAlign is start and direction is 'rtl': Let the anchor point's horizontal position be the right edge of the inline box, and let physical alignment be right.
// 7.3. If textAlign is center: Let the anchor point's horizontal position be half way between the left and right edges of the inline box, and let physical alignment be center.
// Vertical position:
// 7.4. If textBaseline is top: Let the anchor point's vertical position be the top of the em box of the first available font of the inline box.
// 7.5. If textBaseline is hanging: Let the anchor point's vertical position be the hanging baseline of the first available font of the inline box.
// 7.6. If textBaseline is middle: Let the anchor point's vertical position be half way between the bottom and the top of the em box of the first available font of the inline box.
// 7.7. If textBaseline is alphabetic: Let the anchor point's vertical position be the alphabetic baseline of the first available font of the inline box.
// 7.8. If textBaseline is ideographic: Let the anchor point's vertical position be the ideographic-under baseline of the first available font of the inline box.
// 7.9. If textBaseline is bottom: Let the anchor point's vertical position be the bottom of the em box of the first available font of the inline box.
// FIXME: Once we have CanvasTextDrawingStyles, handle the alignment and baseline.
Gfx::IntPoint anchor { 0, 0 };
auto physical_alignment = Gfx::TextAlignment::CenterLeft;
// 8. Let result be an array constructed by iterating over each glyph in the inline box from left to right (if any), adding to the array, for each glyph, the shape of the glyph as it is in the inline box, positioned on a coordinate space using CSS pixels with its origin is at the anchor point.
PreparedText prepared_text { {}, physical_alignment, { 0, 0, static_cast<int>(width), static_cast<int>(height) } };
prepared_text.glyphs.ensure_capacity(replaced_text.length());
size_t offset = 0;
for (auto c : Utf8View { replaced_text }) {
prepared_text.glyphs.append({ c, { static_cast<int>(offset), 0 } });
offset += font.glyph_or_emoji_width(c);
}
// 9. Return result, physical alignment, and the inline box.
return prepared_text;
}
}