RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 18:28:12 +00:00
Code Issues Activity Actions

LibWeb: Use more precise font metrics when doing inline layout

Browse source 
We now position inline-level boxes based on ascent and descent metrics
from the font in use. This makes our basic text layouts look a lot more
like those produced by other browsers. :^)

I've tried to match the terminology used by the CSS Inline Layout spec.

This will regress Acid2 a little bit, and probably various other sites,
but on the whole it's the direction we should be heading, so let's go.
This commit is contained in:
Andreas Kling 2022-03-29 22:33:44 +02:00
parent fae8fde913
commit 6a4247bee9
4 changed files with 59 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

45
Userland/Libraries/LibWeb/Layout/LineBoxFragment.cpp
View file

@ -139,49 +139,4 @@ Gfx::FloatRect LineBoxFragment::selection_rect(const Gfx::Font& font) const
return {};
}
float LineBoxFragment::height_of_inline_level_box(FormattingState const& state) const
{
auto height = [&] {
// From "10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"
// https://www.w3.org/TR/CSS22/visudet.html#line-height
// For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box.
// FIXME: Support inline-table elements.
if (layout_node().is_replaced_box() || layout_node().is_inline_block()) {
auto const& fragment_box_state = state.get(static_cast<Box const&>(layout_node()));
return fragment_box_state.margin_box_height();
}
// For inline boxes, this is their 'line-height'.
return layout_node().line_height();
}();
if (auto length_percentage = layout_node().computed_values().vertical_align().get_pointer<CSS::LengthPercentage>(); length_percentage && length_percentage->is_length())
height += length_percentage->length().to_px(layout_node());
return height;
}
float LineBoxFragment::top_of_inline_level_box(FormattingState const& state) const
{
// FIXME: Support inline-table elements.
if (layout_node().is_replaced_box() || layout_node().is_inline_block()) {
auto const& fragment_box_state = state.get(static_cast<Box const&>(layout_node()));
return m_offset.y() - fragment_box_state.margin_box_top();
}
return m_offset.y() - (layout_node().line_height() - layout_node().computed_values().font_size()) / 2;
}
float LineBoxFragment::bottom_of_inline_level_box(FormattingState const& state) const
{
auto bottom = [&] {
// FIXME: Support inline-table elements.
if (layout_node().is_replaced_box() || layout_node().is_inline_block()) {
auto const& fragment_box_state = state.get(static_cast<Box const&>(layout_node()));
return m_offset.y() + fragment_box_state.content_height + fragment_box_state.margin_box_bottom();
}
return m_offset.y() + (layout_node().line_height() - layout_node().computed_values().font_size()) / 2;
}();
if (auto length_percentage = layout_node().computed_values().vertical_align().get_pointer<CSS::LengthPercentage>(); length_percentage && length_percentage->is_length())
bottom += length_percentage->length().to_px(layout_node());
return bottom;
}
}