mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-07 21:59:54 +00:00
LibWeb: Improve support for SVG text positioning attributes
Previously, we only supported very basic numbers and a single level of
text positioning support in the `x`, `y`, `dx` and `dy` attributes in
`<text>` and `<tspan>` SVG elements.
This improves our support for them in the following ways:
* Any `length-percentage` or `number` type value is accepted;
* Nested `<text>` and `<tspan>` use the 'current text position'
concept to determine where the next text run should go;
* We expose the attributes' values through the API.
Though we still do not support:
* Applying the `rotate` attribute;
* Applying transformations on a per-character basis.
* Proper horizontal and vertical glyph advancing (we just use the path
bounding box for now).
This commit is contained in:
Jelle Raaijmakers
Andreas Kling
parent
527a293047
commit
2c5beeabe3
Notes:
github-actions[bot]
2025-11-20 22:16:24 +00:00
Author: https://github.com/gmta
Commit: 2c5beeabe3
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6878
10 changed files with 289 additions and 92 deletions
|
|
@ -84,6 +84,7 @@ namespace Web::SVG::AttributeNames {
|
|||
__ENUMERATE_SVG_ATTRIBUTE(requiredExtensions, "requiredExtensions") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(requiredFeatures, "requiredFeatures") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(result, "result") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(rotate, "rotate") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(rx, "rx") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(ry, "ry") \
|
||||
__ENUMERATE_SVG_ATTRIBUTE(slope, "slope") \
|
||||
|
|
|
|||
|
|
@ -115,6 +115,7 @@ public:
|
|||
float resolve_relative_to(float length) const;
|
||||
|
||||
float value() const { return m_value; }
|
||||
bool is_percentage() const { return m_is_percentage; }
|
||||
|
||||
private:
|
||||
float m_value;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,26 @@
|
|||
/*
|
||||
* Copyright (c) 2022, Andreas Kling <andreas@ladybird.org>
|
||||
* Copyright (c) 2023, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
||||
#include <LibWeb/Bindings/SVGTextPositioningElementPrototype.h>
|
||||
#include <LibWeb/CSS/Parser/Parser.h>
|
||||
#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
|
||||
#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
#include <LibWeb/SVG/AttributeNames.h>
|
||||
#include <LibWeb/SVG/AttributeParser.h>
|
||||
#include <LibWeb/SVG/SVGAnimatedLengthList.h>
|
||||
#include <LibWeb/SVG/SVGAnimatedNumberList.h>
|
||||
#include <LibWeb/SVG/SVGLength.h>
|
||||
#include <LibWeb/SVG/SVGLengthList.h>
|
||||
#include <LibWeb/SVG/SVGNumber.h>
|
||||
#include <LibWeb/SVG/SVGNumberList.h>
|
||||
#include <LibWeb/SVG/SVGTextPositioningElement.h>
|
||||
|
||||
namespace Web::SVG {
|
||||
|
|
@ -24,32 +36,121 @@ void SVGTextPositioningElement::initialize(JS::Realm& realm)
|
|||
Base::initialize(realm);
|
||||
}
|
||||
|
||||
void SVGTextPositioningElement::visit_edges(Visitor& visitor)
|
||||
{
|
||||
Base::visit_edges(visitor);
|
||||
visitor.visit(m_x);
|
||||
visitor.visit(m_y);
|
||||
visitor.visit(m_dx);
|
||||
visitor.visit(m_dy);
|
||||
visitor.visit(m_rotate);
|
||||
}
|
||||
|
||||
void SVGTextPositioningElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_)
|
||||
{
|
||||
Base::attribute_changed(name, old_value, value, namespace_);
|
||||
|
||||
if (name == SVG::AttributeNames::x) {
|
||||
m_x = AttributeParser::parse_number_percentage(value.value_or(String {}));
|
||||
} else if (name == SVG::AttributeNames::y) {
|
||||
m_y = AttributeParser::parse_number_percentage(value.value_or(String {}));
|
||||
} else if (name == SVG::AttributeNames::dx) {
|
||||
m_dx = AttributeParser::parse_number_percentage(value.value_or(String {}));
|
||||
} else if (name == SVG::AttributeNames::dy) {
|
||||
m_dy = AttributeParser::parse_number_percentage(value.value_or(String {}));
|
||||
}
|
||||
if (name == AttributeNames::x)
|
||||
m_x = {};
|
||||
else if (name == AttributeNames::y)
|
||||
m_y = {};
|
||||
else if (name == AttributeNames::dx)
|
||||
m_dx = {};
|
||||
else if (name == AttributeNames::dy)
|
||||
m_dy = {};
|
||||
else if (name == AttributeNames::rotate)
|
||||
m_rotate = {};
|
||||
}
|
||||
|
||||
Gfx::FloatPoint SVGTextPositioningElement::get_offset(CSSPixelSize const& viewport_size) const
|
||||
TextPositioning SVGTextPositioningElement::text_positioning() const
|
||||
{
|
||||
auto const viewport_width = viewport_size.width().to_float();
|
||||
auto const viewport_height = viewport_size.height().to_float();
|
||||
CSS::Parser::ParsingParams const parsing_params { document() };
|
||||
|
||||
float const x = m_x.value_or({ 0, false }).resolve_relative_to(viewport_width);
|
||||
float const y = m_y.value_or({ 0, false }).resolve_relative_to(viewport_height);
|
||||
float const dx = m_dx.value_or({ 0, false }).resolve_relative_to(viewport_width);
|
||||
float const dy = m_dy.value_or({ 0, false }).resolve_relative_to(viewport_height);
|
||||
// https://svgwg.org/svg2-draft/text.html#TSpanAttributes
|
||||
// FIXME: This only handles single values, not lists.
|
||||
auto resolve_value = [&](FlyString const& attribute) -> Vector<TextPositioning::Position> {
|
||||
auto raw_value = get_attribute_value(attribute);
|
||||
|
||||
return { x + dx, y + dy };
|
||||
auto style_value = parse_css_type(parsing_params, raw_value, CSS::ValueType::LengthPercentage);
|
||||
if (auto const* length_style_value = as_if<CSS::LengthStyleValue>(style_value.ptr()))
|
||||
return { CSS::LengthPercentage::from_style_value(*length_style_value) };
|
||||
|
||||
if (auto const* percentage_style_value = as_if<CSS::PercentageStyleValue>(style_value.ptr()))
|
||||
return { CSS::LengthPercentage::from_style_value(*percentage_style_value) };
|
||||
|
||||
style_value = parse_css_type(parsing_params, raw_value, CSS::ValueType::Number);
|
||||
if (auto const* number_style_value = as_if<CSS::NumberStyleValue>(style_value.ptr()))
|
||||
return { CSS::Number { CSS::Number::Type::Number, number_style_value->number() } };
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
// FIXME: Implement support for the rotate attribute.
|
||||
return {
|
||||
.x = resolve_value(AttributeNames::x),
|
||||
.y = resolve_value(AttributeNames::y),
|
||||
.dx = resolve_value(AttributeNames::dx),
|
||||
.dy = resolve_value(AttributeNames::dy),
|
||||
.rotate = Vector<float> {},
|
||||
};
|
||||
}
|
||||
|
||||
GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::ensure_length_list(GC::Ptr<SVGAnimatedLengthList>& list,
|
||||
FlyString const& attribute_name) const
|
||||
{
|
||||
if (!list) {
|
||||
// FIXME: This only handles single values, not lists.
|
||||
float value = 0.f;
|
||||
auto maybe_number_percentage = AttributeParser::parse_number_percentage(get_attribute_value(attribute_name));
|
||||
if (maybe_number_percentage.has_value())
|
||||
value = maybe_number_percentage.release_value().value();
|
||||
|
||||
auto length = SVGLength::create(realm(), SVGLength::SVG_LENGTHTYPE_NUMBER, value, SVGLength::ReadOnly::Yes);
|
||||
auto length_list = SVGLengthList::create(realm(), { length }, ReadOnlyList::Yes);
|
||||
list = SVGAnimatedLengthList::create(realm(), length_list);
|
||||
}
|
||||
return *list;
|
||||
}
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__x
|
||||
GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::x()
|
||||
{
|
||||
return ensure_length_list(m_x, AttributeNames::x);
|
||||
}
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__y
|
||||
GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::y()
|
||||
{
|
||||
return ensure_length_list(m_y, AttributeNames::y);
|
||||
}
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__dx
|
||||
GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::dx()
|
||||
{
|
||||
return ensure_length_list(m_dx, AttributeNames::dx);
|
||||
}
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__dy
|
||||
GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::dy()
|
||||
{
|
||||
return ensure_length_list(m_dy, AttributeNames::dy);
|
||||
}
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__rotate
|
||||
GC::Ref<SVGAnimatedNumberList> SVGTextPositioningElement::rotate()
|
||||
{
|
||||
if (!m_rotate) {
|
||||
// FIXME: This only handles single values, not lists.
|
||||
float value = 0.f;
|
||||
auto maybe_number_percentage = AttributeParser::parse_number_percentage(get_attribute_value(AttributeNames::rotate));
|
||||
if (maybe_number_percentage.has_value() && !maybe_number_percentage.value().is_percentage())
|
||||
value = maybe_number_percentage.release_value().value();
|
||||
|
||||
auto number = SVGNumber::create(realm(), value, SVGNumber::ReadOnly::Yes);
|
||||
auto number_list = SVGNumberList::create(realm(), { number }, ReadOnlyList::Yes);
|
||||
m_rotate = SVGAnimatedNumberList::create(realm(), number_list);
|
||||
}
|
||||
return *m_rotate;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
* Copyright (c) 2023, MacDue <macdue@dueutil.tech>
|
||||
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
|
@ -7,10 +8,45 @@
|
|||
#pragma once
|
||||
|
||||
#include <LibWeb/SVG/SVGTextContentElement.h>
|
||||
#include <LibWeb/WebIDL/ExceptionOr.h>
|
||||
|
||||
namespace Web::SVG {
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#TSpanNotes
|
||||
// https://svgwg.org/svg2-draft/text.html#TSpanAttributes
|
||||
struct TextPositioning {
|
||||
using Position = Variant<CSS::LengthPercentage, CSS::Number>;
|
||||
|
||||
Vector<Position> x;
|
||||
Vector<Position> y;
|
||||
Vector<Position> dx;
|
||||
Vector<Position> dy;
|
||||
Vector<float> rotate;
|
||||
|
||||
void apply_to_text_position(Layout::Node const& node, CSSPixelSize viewport, Gfx::FloatPoint& current_text_position,
|
||||
size_t character_index) const
|
||||
{
|
||||
auto value_for_character = [&](Vector<Position> const& values) -> float {
|
||||
if (values.is_empty())
|
||||
return 0.f;
|
||||
|
||||
auto position = character_index < values.size() ? values[character_index] : values.last();
|
||||
return position.visit(
|
||||
[](CSS::Number const& number) { return static_cast<float>(number.value()); },
|
||||
[&](CSS::LengthPercentage const& length_percentage) {
|
||||
auto reference = &values == &x || &values == &dx ? viewport.width() : viewport.height();
|
||||
return length_percentage.to_px(node, reference).to_float();
|
||||
});
|
||||
};
|
||||
|
||||
if (!x.is_empty())
|
||||
current_text_position.set_x(value_for_character(x));
|
||||
if (!y.is_empty())
|
||||
current_text_position.set_y(value_for_character(y));
|
||||
|
||||
current_text_position.translate_by(value_for_character(dx), value_for_character(dy));
|
||||
}
|
||||
};
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#InterfaceSVGTextPositioningElement
|
||||
class SVGTextPositioningElement : public SVGTextContentElement {
|
||||
WEB_PLATFORM_OBJECT(SVGTextPositioningElement, SVGTextContentElement);
|
||||
|
|
@ -18,23 +54,28 @@ class SVGTextPositioningElement : public SVGTextContentElement {
|
|||
public:
|
||||
virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
|
||||
|
||||
Gfx::FloatPoint get_offset(CSSPixelSize const& viewport_size) const;
|
||||
TextPositioning text_positioning() const;
|
||||
|
||||
GC::Ref<SVGAnimatedLength> x() const;
|
||||
GC::Ref<SVGAnimatedLength> y() const;
|
||||
GC::Ref<SVGAnimatedLength> dx() const;
|
||||
GC::Ref<SVGAnimatedLength> dy() const;
|
||||
GC::Ref<SVGAnimatedLengthList> x();
|
||||
GC::Ref<SVGAnimatedLengthList> y();
|
||||
GC::Ref<SVGAnimatedLengthList> dx();
|
||||
GC::Ref<SVGAnimatedLengthList> dy();
|
||||
GC::Ref<SVGAnimatedNumberList> rotate();
|
||||
|
||||
protected:
|
||||
SVGTextPositioningElement(DOM::Document&, DOM::QualifiedName);
|
||||
|
||||
virtual void initialize(JS::Realm&) override;
|
||||
virtual void visit_edges(Visitor&) override;
|
||||
|
||||
private:
|
||||
Optional<NumberPercentage> m_x;
|
||||
Optional<NumberPercentage> m_y;
|
||||
Optional<NumberPercentage> m_dx;
|
||||
Optional<NumberPercentage> m_dy;
|
||||
GC::Ref<SVGAnimatedLengthList> ensure_length_list(GC::Ptr<SVGAnimatedLengthList>&, FlyString const& attribute_name) const;
|
||||
|
||||
GC::Ptr<SVGAnimatedLengthList> m_x;
|
||||
GC::Ptr<SVGAnimatedLengthList> m_y;
|
||||
GC::Ptr<SVGAnimatedLengthList> m_dx;
|
||||
GC::Ptr<SVGAnimatedLengthList> m_dy;
|
||||
GC::Ptr<SVGAnimatedNumberList> m_rotate;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
#import <SVG/SVGAnimatedLengthList.idl>
|
||||
#import <SVG/SVGAnimatedNumberList.idl>
|
||||
#import <SVG/SVGTextContentElement.idl>
|
||||
|
||||
// https://svgwg.org/svg2-draft/text.html#InterfaceSVGTextPositioningElement
|
||||
[Exposed=Window]
|
||||
interface SVGTextPositioningElement : SVGTextContentElement {
|
||||
[FIXME, SameObject] readonly attribute SVGAnimatedLengthList x;
|
||||
[FIXME, SameObject] readonly attribute SVGAnimatedLengthList y;
|
||||
[FIXME, SameObject] readonly attribute SVGAnimatedLengthList dx;
|
||||
[FIXME, SameObject] readonly attribute SVGAnimatedLengthList dy;
|
||||
[FIXME, SameObject] readonly attribute SVGAnimatedNumberList rotate;
|
||||
[SameObject] readonly attribute SVGAnimatedLengthList x;
|
||||
[SameObject] readonly attribute SVGAnimatedLengthList y;
|
||||
[SameObject] readonly attribute SVGAnimatedLengthList dx;
|
||||
[SameObject] readonly attribute SVGAnimatedLengthList dy;
|
||||
[SameObject] readonly attribute SVGAnimatedNumberList rotate;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue