mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-01 05:39:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Make inline layout independent of direction

Browse source 
This patch separates the notion of x, y, width, and height, from
inline_offset, block_offset, inline_length, and block_length.
These can then be used to compute the final screen positions,
in respect of the desired layout direction. This is the terminology
used in https://drafts.csswg.org/css-writing-modes/#text-flow

This makes it possible to use this layout algorithm to flow
text in any direction. For example, vertically.
This commit is contained in:
BenJilks 2024-10-29 11:32:59 +00:00 • committed by Alexander Kalenik
commit ede9012723
Notes: github-actions[bot] 2024-11-03 16:03:10 +00:00
8 changed files with 130 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

107
Userland/Libraries/LibWeb/Layout/LineBuilder.cpp
View file

@ -28,6 +28,8 @@ LineBuilder::~LineBuilder()
void LineBuilder::break_line(ForcedBreak forced_break, Optional<CSSPixels> next_item_width)
{
// FIXME: Respect inline direction.
auto& last_line_box = ensure_last_line_box();
last_line_box.m_has_break = true;
last_line_box.m_has_forced_break = forced_break == ForcedBreak::Yes;
@ -39,8 +41,8 @@ void LineBuilder::break_line(ForcedBreak forced_break, Optional<CSSPixels> next_
m_containing_block_used_values.line_boxes.append(LineBox(m_direction));
begin_new_line(true, break_count == 0);
break_count++;
floats_intrude_at_current_y = m_context.any_floats_intrude_at_y(m_current_y);
} while ((floats_intrude_at_current_y && !m_context.can_fit_new_line_at_y(m_current_y))
floats_intrude_at_current_y = m_context.any_floats_intrude_at_block_offset(m_current_block_offset);
} while ((floats_intrude_at_current_y && !m_context.can_fit_new_line_at_block_offset(m_current_block_offset))
|| (next_item_width.has_value()
&& next_item_width.value() > m_available_width_for_current_line
&& floats_intrude_at_current_y));
@ -51,19 +53,19 @@ void LineBuilder::begin_new_line(bool increment_y, bool is_first_break_in_sequen
if (increment_y) {
if (is_first_break_in_sequence) {
// First break is simple, just go to the start of the next line.
m_current_y += max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height());
m_current_block_offset += max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height());
} else {
// We're doing more than one break in a row.
// This means we're trying to squeeze past intruding floats.
// Scan 1px at a time until we find a Y value where a new line can fit.
// FIXME: This is super dumb and inefficient.
CSSPixels candidate_y = m_current_y + 1;
CSSPixels candidate_block_offset = m_current_block_offset + 1;
while (true) {
if (m_context.can_fit_new_line_at_y(candidate_y))
if (m_context.can_fit_new_line_at_block_offset(candidate_block_offset))
break;
++candidate_y;
++candidate_block_offset;
}
m_current_y = candidate_y;
m_current_block_offset = candidate_block_offset;
}
}
recalculate_available_space();
@ -73,7 +75,7 @@ void LineBuilder::begin_new_line(bool increment_y, bool is_first_break_in_sequen
// FIXME: Support text-indent with "each-line".
if (m_containing_block_used_values.line_boxes.size() <= 1) {
ensure_last_line_box().m_width += m_text_indent;
ensure_last_line_box().m_inline_length += m_text_indent;
}
}
@ -100,8 +102,10 @@ void LineBuilder::append_box(Box const& box, CSSPixels leading_size, CSSPixels t
void LineBuilder::append_text_chunk(TextNode const& text_node, size_t offset_in_node, size_t length_in_node, CSSPixels leading_size, CSSPixels trailing_size, CSSPixels leading_margin, CSSPixels trailing_margin, CSSPixels content_width, CSSPixels content_height, RefPtr<Gfx::GlyphRun> glyph_run)
{
ensure_last_line_box().add_fragment(text_node, offset_in_node, length_in_node, leading_size, trailing_size, leading_margin, trailing_margin, content_width, content_height, 0, 0, move(glyph_run));
m_max_height_on_current_line = max(m_max_height_on_current_line, content_height);
auto& line_box = ensure_last_line_box();
line_box.add_fragment(text_node, offset_in_node, length_in_node, leading_size, trailing_size, leading_margin, trailing_margin, content_width, content_height, 0, 0, move(glyph_run));
m_max_height_on_current_line = max(m_max_height_on_current_line, line_box.block_length());
}
CSSPixels LineBuilder::y_for_float_to_be_inserted_here(Box const& box)
@ -110,28 +114,28 @@ CSSPixels LineBuilder::y_for_float_to_be_inserted_here(Box const& box)
CSSPixels const width = box_state.margin_box_width();
CSSPixels const height = box_state.margin_box_height();
CSSPixels candidate_y = m_current_y;
CSSPixels candidate_block_offset = m_current_block_offset;
auto const& current_line = ensure_last_line_box();
// If there's already inline content on the current line, check if the new float can fit
// alongside the content. If not, place it on the next line.
if (current_line.width() > 0 && (current_line.width() + width) > m_available_width_for_current_line)
candidate_y += current_line.height();
candidate_block_offset += current_line.height();
// Then, look for the next Y position where we can fit the new float.
// FIXME: This is super dumb, we move 1px downwards per iteration and stop
// when we find an Y value where we don't collide with other floats.
while (true) {
auto space_at_y_top = m_context.available_space_for_line(candidate_y);
auto space_at_y_bottom = m_context.available_space_for_line(candidate_y + height);
auto space_at_y_top = m_context.available_space_for_line(candidate_block_offset);
auto space_at_y_bottom = m_context.available_space_for_line(candidate_block_offset + height);
if (width > space_at_y_top || width > space_at_y_bottom) {
if (!m_context.any_floats_intrude_at_y(candidate_y) && !m_context.any_floats_intrude_at_y(candidate_y + height)) {
return candidate_y;
if (!m_context.any_floats_intrude_at_block_offset(candidate_block_offset) && !m_context.any_floats_intrude_at_block_offset(candidate_block_offset + height)) {
return candidate_block_offset;
}
} else {
return candidate_y;
return candidate_block_offset;
}
candidate_y += 1;
candidate_block_offset += 1;
}
}
@ -144,9 +148,9 @@ bool LineBuilder::should_break(CSSPixels next_item_width)
if (line_boxes.is_empty() || line_boxes.last().is_empty()) {
// If we don't have a single line box yet *and* there are no floats intruding
// at this Y coordinate, we don't need to break before inserting anything.
if (!m_context.any_floats_intrude_at_y(m_current_y))
if (!m_context.any_floats_intrude_at_block_offset(m_current_block_offset))
return false;
if (!m_context.any_floats_intrude_at_y(m_current_y + m_context.containing_block().computed_values().line_height()))
if (!m_context.any_floats_intrude_at_block_offset(m_current_block_offset + m_context.containing_block().computed_values().line_height()))
return false;
}
auto current_line_width = ensure_last_line_box().width();
@ -167,31 +171,33 @@ void LineBuilder::update_last_line()
auto direction = m_context.containing_block().computed_values().direction();
auto current_line_height = max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height());
CSSPixels x_offset_top = m_context.leftmost_x_offset_at(m_current_y);
CSSPixels x_offset_bottom = m_context.leftmost_x_offset_at(m_current_y + current_line_height - 1);
CSSPixels x_offset = max(x_offset_top, x_offset_bottom);
CSSPixels inline_offset_top = m_context.leftmost_inline_offset_at(m_current_block_offset);
CSSPixels inline_offset_bottom = m_context.leftmost_inline_offset_at(m_current_block_offset + current_line_height - 1);
CSSPixels inline_offset = max(inline_offset_top, inline_offset_bottom);
CSSPixels block_offset = 0;
CSSPixels excess_horizontal_space = m_available_width_for_current_line.to_px_or_zero() - line_box.width();
// FIXME: Respect inline direction.
CSSPixels excess_inline_space = m_available_width_for_current_line.to_px_or_zero() - line_box.inline_length();
// If (after justification, if any) the inline contents of a line box are too long to fit within it,
// then the contents are start-aligned: any content that doesn't fit overflows the line box’s end edge.
if (excess_horizontal_space > 0) {
if (excess_inline_space > 0) {
switch (text_align) {
case CSS::TextAlign::Center:
case CSS::TextAlign::LibwebCenter:
x_offset += excess_horizontal_space / 2;
inline_offset += excess_inline_space / 2;
break;
case CSS::TextAlign::Start:
if (direction == CSS::Direction::Rtl)
x_offset += excess_horizontal_space;
inline_offset += excess_inline_space;
break;
case CSS::TextAlign::End:
if (direction == CSS::Direction::Ltr)
x_offset += excess_horizontal_space;
inline_offset += excess_inline_space;
break;
case CSS::TextAlign::Right:
case CSS::TextAlign::LibwebRight:
x_offset += excess_horizontal_space;
inline_offset += excess_inline_space;
break;
case CSS::TextAlign::Left:
case CSS::TextAlign::LibwebLeft:
@ -249,8 +255,8 @@ void LineBuilder::update_last_line()
}();
// Start with the "strut", an imaginary zero-width box at the start of each line box.
auto strut_top = m_current_y;
auto strut_bottom = m_current_y + m_context.containing_block().computed_values().line_height();
auto strut_top = m_current_block_offset;
auto strut_bottom = m_current_block_offset + m_context.containing_block().computed_values().line_height();
CSSPixels uppermost_box_top = strut_top;
CSSPixels lowermost_box_bottom = strut_bottom;
@ -258,10 +264,10 @@ void LineBuilder::update_last_line()
for (size_t i = 0; i < line_box.fragments().size(); ++i) {
auto& fragment = line_box.fragments()[i];
CSSPixels new_fragment_x = round(x_offset + fragment.offset().x());
CSSPixels new_fragment_y = 0;
CSSPixels new_fragment_inline_offset = round(inline_offset + fragment.inline_offset());
CSSPixels new_fragment_block_offset = 0;
auto y_value_for_alignment = [&](CSS::VerticalAlign vertical_align) {
auto block_offset_value_for_alignment = [&](CSS::VerticalAlign vertical_align) {
CSSPixels effective_box_top_offset = fragment.border_box_top();
CSSPixels effective_box_bottom_offset = fragment.border_box_top();
if (fragment.is_atomic_inline()) {
@ -272,14 +278,14 @@ void LineBuilder::update_last_line()
switch (vertical_align) {
case CSS::VerticalAlign::Baseline:
return m_current_y + line_box_baseline - fragment.baseline() + effective_box_top_offset;
return m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
case CSS::VerticalAlign::Top:
return m_current_y + effective_box_top_offset;
return m_current_block_offset + effective_box_top_offset;
case CSS::VerticalAlign::Middle: {
// Align the vertical midpoint of the box with the baseline of the parent box
// plus half the x-height of the parent.
auto const x_height = CSSPixels::nearest_value_for(m_context.containing_block().first_available_font().pixel_metrics().x_height);
return m_current_y + line_box_baseline + ((effective_box_top_offset - effective_box_bottom_offset - x_height - fragment.height()) / 2);
return m_current_block_offset + line_box_baseline + ((effective_box_top_offset - effective_box_bottom_offset - x_height - fragment.height()) / 2);
}
case CSS::VerticalAlign::Bottom:
case CSS::VerticalAlign::Sub:
@ -287,27 +293,28 @@ void LineBuilder::update_last_line()
case CSS::VerticalAlign::TextBottom:
case CSS::VerticalAlign::TextTop:
// FIXME: These are all 'baseline'
return m_current_y + line_box_baseline - fragment.baseline() + effective_box_top_offset;
return m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
}
VERIFY_NOT_REACHED();
};
auto const& vertical_align = fragment.layout_node().computed_values().vertical_align();
if (vertical_align.has<CSS::VerticalAlign>()) {
new_fragment_y = y_value_for_alignment(vertical_align.get<CSS::VerticalAlign>());
new_fragment_block_offset = block_offset_value_for_alignment(vertical_align.get<CSS::VerticalAlign>());
} else {
if (auto const* length_percentage = vertical_align.get_pointer<CSS::LengthPercentage>()) {
if (length_percentage->is_length()) {
auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node());
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
new_fragment_block_offset = block_offset_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
} else if (length_percentage->is_percentage()) {
auto vertical_align_amount = m_context.containing_block().computed_values().line_height().scaled(length_percentage->percentage().as_fraction());
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
new_fragment_block_offset = block_offset_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
}
}
}
fragment.set_offset({ new_fragment_x, floor(new_fragment_y) });
fragment.set_inline_offset(new_fragment_inline_offset);
fragment.set_block_offset(floor(new_fragment_block_offset) + block_offset);
CSSPixels top_of_inline_box = 0;
CSSPixels bottom_of_inline_box = 0;
@ -315,15 +322,15 @@ void LineBuilder::update_last_line()
// FIXME: Support inline-table elements.
if (fragment.is_atomic_inline()) {
auto const& fragment_box_state = m_layout_state.get(static_cast<Box const&>(fragment.layout_node()));
top_of_inline_box = (fragment.offset().y() - fragment_box_state.margin_box_top());
bottom_of_inline_box = (fragment.offset().y() + fragment_box_state.content_height() + fragment_box_state.margin_box_bottom());
top_of_inline_box = (fragment.block_offset() - fragment_box_state.margin_box_top());
bottom_of_inline_box = (fragment.block_offset() + fragment_box_state.content_height() + fragment_box_state.margin_box_bottom());
} else {
auto font_metrics = fragment.layout_node().first_available_font().pixel_metrics();
auto typographic_height = CSSPixels::nearest_value_for(font_metrics.ascent + font_metrics.descent);
auto leading = fragment.layout_node().computed_values().line_height() - typographic_height;
auto half_leading = leading / 2;
top_of_inline_box = (fragment.offset().y() + fragment.baseline() - CSSPixels::nearest_value_for(font_metrics.ascent) - half_leading);
bottom_of_inline_box = (fragment.offset().y() + fragment.baseline() + CSSPixels::nearest_value_for(font_metrics.descent) + half_leading);
top_of_inline_box = (fragment.block_offset() + fragment.baseline() - CSSPixels::nearest_value_for(font_metrics.ascent) - half_leading);
bottom_of_inline_box = (fragment.block_offset() + fragment.baseline() + CSSPixels::nearest_value_for(font_metrics.descent) + half_leading);
}
if (auto const* length_percentage = fragment.layout_node().computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) {
if (length_percentage->is_length())
@ -338,9 +345,9 @@ void LineBuilder::update_last_line()
}
// 3. The line box height is the distance between the uppermost box top and the lowermost box bottom.
line_box.m_height = lowermost_box_bottom - uppermost_box_top;
line_box.m_block_length = lowermost_box_bottom - uppermost_box_top;
line_box.m_bottom = m_current_y + line_box.m_height;
line_box.m_bottom = m_current_block_offset + line_box.m_block_length;
line_box.m_baseline = line_box_baseline;
}
@ -357,8 +364,8 @@ void LineBuilder::remove_last_line_if_empty()
void LineBuilder::recalculate_available_space()
{
auto current_line_height = max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height());
auto available_at_top_of_line_box = m_context.available_space_for_line(m_current_y);
auto available_at_bottom_of_line_box = m_context.available_space_for_line(m_current_y + current_line_height - 1);
auto available_at_top_of_line_box = m_context.available_space_for_line(m_current_block_offset);
auto available_at_bottom_of_line_box = m_context.available_space_for_line(m_current_block_offset + current_line_height - 1);
m_available_width_for_current_line = min(available_at_bottom_of_line_box, available_at_top_of_line_box);
if (!m_containing_block_used_values.line_boxes.is_empty())
m_containing_block_used_values.line_boxes.last().m_original_available_width = m_available_width_for_current_line;