/src/serenity/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp
Line | Count | Source |
1 | | /* |
2 | | * Copyright (c) 2022, Andreas Kling <kling@serenityos.org> |
3 | | * |
4 | | * SPDX-License-Identifier: BSD-2-Clause |
5 | | */ |
6 | | |
7 | | #include <LibWeb/Layout/BlockFormattingContext.h> |
8 | | #include <LibWeb/Layout/LineBuilder.h> |
9 | | #include <LibWeb/Layout/TextNode.h> |
10 | | |
11 | | namespace Web::Layout { |
12 | | |
13 | | LineBuilder::LineBuilder(InlineFormattingContext& context, LayoutState& layout_state, LayoutState::UsedValues& containing_block_used_values, CSS::Direction direction) |
14 | 0 | : m_context(context) |
15 | 0 | , m_layout_state(layout_state) |
16 | 0 | , m_containing_block_used_values(containing_block_used_values) |
17 | 0 | , m_direction(direction) |
18 | 0 | { |
19 | 0 | m_text_indent = m_context.containing_block().computed_values().text_indent().to_px(m_context.containing_block(), m_containing_block_used_values.content_width()); |
20 | 0 | begin_new_line(false); |
21 | 0 | } |
22 | | |
23 | | LineBuilder::~LineBuilder() |
24 | 0 | { |
25 | 0 | if (m_last_line_needs_update) |
26 | 0 | update_last_line(); |
27 | 0 | } |
28 | | |
29 | | void LineBuilder::break_line(ForcedBreak forced_break, Optional<CSSPixels> next_item_width) |
30 | 0 | { |
31 | 0 | auto& last_line_box = ensure_last_line_box(); |
32 | 0 | last_line_box.m_has_break = true; |
33 | 0 | last_line_box.m_has_forced_break = forced_break == ForcedBreak::Yes; |
34 | |
|
35 | 0 | update_last_line(); |
36 | 0 | size_t break_count = 0; |
37 | 0 | bool floats_intrude_at_current_y = false; |
38 | 0 | do { |
39 | 0 | m_containing_block_used_values.line_boxes.append(LineBox(m_direction)); |
40 | 0 | begin_new_line(true, break_count == 0); |
41 | 0 | break_count++; |
42 | 0 | floats_intrude_at_current_y = m_context.any_floats_intrude_at_y(m_current_y); |
43 | 0 | } while ((floats_intrude_at_current_y && !m_context.can_fit_new_line_at_y(m_current_y)) |
44 | 0 | || (next_item_width.has_value() |
45 | 0 | && next_item_width.value() > m_available_width_for_current_line |
46 | 0 | && floats_intrude_at_current_y)); |
47 | 0 | } |
48 | | |
49 | | void LineBuilder::begin_new_line(bool increment_y, bool is_first_break_in_sequence) |
50 | 0 | { |
51 | 0 | if (increment_y) { |
52 | 0 | if (is_first_break_in_sequence) { |
53 | | // First break is simple, just go to the start of the next line. |
54 | 0 | m_current_y += max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height()); |
55 | 0 | } else { |
56 | | // We're doing more than one break in a row. |
57 | | // This means we're trying to squeeze past intruding floats. |
58 | | // Scan 1px at a time until we find a Y value where a new line can fit. |
59 | | // FIXME: This is super dumb and inefficient. |
60 | 0 | CSSPixels candidate_y = m_current_y + 1; |
61 | 0 | while (true) { |
62 | 0 | if (m_context.can_fit_new_line_at_y(candidate_y)) |
63 | 0 | break; |
64 | 0 | ++candidate_y; |
65 | 0 | } |
66 | 0 | m_current_y = candidate_y; |
67 | 0 | } |
68 | 0 | } |
69 | 0 | recalculate_available_space(); |
70 | 0 | ensure_last_line_box().m_original_available_width = m_available_width_for_current_line; |
71 | 0 | m_max_height_on_current_line = 0; |
72 | 0 | m_last_line_needs_update = true; |
73 | | |
74 | | // FIXME: Support text-indent with "each-line". |
75 | 0 | if (m_containing_block_used_values.line_boxes.size() <= 1) { |
76 | 0 | ensure_last_line_box().m_width += m_text_indent; |
77 | 0 | } |
78 | 0 | } |
79 | | |
80 | | LineBox& LineBuilder::ensure_last_line_box() |
81 | 0 | { |
82 | 0 | auto& line_boxes = m_containing_block_used_values.line_boxes; |
83 | 0 | if (line_boxes.is_empty()) |
84 | 0 | line_boxes.append(LineBox(m_direction)); |
85 | 0 | return line_boxes.last(); |
86 | 0 | } |
87 | | |
88 | | void LineBuilder::append_box(Box const& box, CSSPixels leading_size, CSSPixels trailing_size, CSSPixels leading_margin, CSSPixels trailing_margin) |
89 | 0 | { |
90 | 0 | auto& box_state = m_layout_state.get_mutable(box); |
91 | 0 | auto& line_box = ensure_last_line_box(); |
92 | 0 | line_box.add_fragment(box, 0, 0, leading_size, trailing_size, leading_margin, trailing_margin, box_state.content_width(), box_state.content_height(), box_state.border_box_top(), box_state.border_box_bottom()); |
93 | 0 | m_max_height_on_current_line = max(m_max_height_on_current_line, box_state.margin_box_height()); |
94 | |
|
95 | 0 | box_state.containing_line_box_fragment = LineBoxFragmentCoordinate { |
96 | 0 | .line_box_index = m_containing_block_used_values.line_boxes.size() - 1, |
97 | 0 | .fragment_index = line_box.fragments().size() - 1, |
98 | 0 | }; |
99 | 0 | } |
100 | | |
101 | | 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) |
102 | 0 | { |
103 | 0 | 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)); |
104 | 0 | m_max_height_on_current_line = max(m_max_height_on_current_line, content_height); |
105 | 0 | } |
106 | | |
107 | | CSSPixels LineBuilder::y_for_float_to_be_inserted_here(Box const& box) |
108 | 0 | { |
109 | 0 | auto const& box_state = m_layout_state.get(box); |
110 | 0 | CSSPixels const width = box_state.margin_box_width(); |
111 | 0 | CSSPixels const height = box_state.margin_box_height(); |
112 | |
|
113 | 0 | CSSPixels candidate_y = m_current_y; |
114 | |
|
115 | 0 | auto const& current_line = ensure_last_line_box(); |
116 | | // If there's already inline content on the current line, check if the new float can fit |
117 | | // alongside the content. If not, place it on the next line. |
118 | 0 | if (current_line.width() > 0 && (current_line.width() + width) > m_available_width_for_current_line) |
119 | 0 | candidate_y += current_line.height(); |
120 | | |
121 | | // Then, look for the next Y position where we can fit the new float. |
122 | | // FIXME: This is super dumb, we move 1px downwards per iteration and stop |
123 | | // when we find an Y value where we don't collide with other floats. |
124 | 0 | while (true) { |
125 | 0 | auto space_at_y_top = m_context.available_space_for_line(candidate_y); |
126 | 0 | auto space_at_y_bottom = m_context.available_space_for_line(candidate_y + height); |
127 | 0 | if (width > space_at_y_top || width > space_at_y_bottom) { |
128 | 0 | if (!m_context.any_floats_intrude_at_y(candidate_y) && !m_context.any_floats_intrude_at_y(candidate_y + height)) { |
129 | 0 | return candidate_y; |
130 | 0 | } |
131 | 0 | } else { |
132 | 0 | return candidate_y; |
133 | 0 | } |
134 | 0 | candidate_y += 1; |
135 | 0 | } |
136 | 0 | } |
137 | | |
138 | | bool LineBuilder::should_break(CSSPixels next_item_width) |
139 | 0 | { |
140 | 0 | if (m_available_width_for_current_line.is_max_content()) |
141 | 0 | return false; |
142 | | |
143 | 0 | auto const& line_boxes = m_containing_block_used_values.line_boxes; |
144 | 0 | if (line_boxes.is_empty() || line_boxes.last().is_empty()) { |
145 | | // If we don't have a single line box yet *and* there are no floats intruding |
146 | | // at this Y coordinate, we don't need to break before inserting anything. |
147 | 0 | if (!m_context.any_floats_intrude_at_y(m_current_y)) |
148 | 0 | return false; |
149 | 0 | if (!m_context.any_floats_intrude_at_y(m_current_y + m_context.containing_block().computed_values().line_height())) |
150 | 0 | return false; |
151 | 0 | } |
152 | 0 | auto current_line_width = ensure_last_line_box().width(); |
153 | 0 | return (current_line_width + next_item_width) > m_available_width_for_current_line; |
154 | 0 | } |
155 | | |
156 | | void LineBuilder::update_last_line() |
157 | 0 | { |
158 | 0 | m_last_line_needs_update = false; |
159 | 0 | auto& line_boxes = m_containing_block_used_values.line_boxes; |
160 | |
|
161 | 0 | if (line_boxes.is_empty()) |
162 | 0 | return; |
163 | | |
164 | 0 | auto& line_box = line_boxes.last(); |
165 | |
|
166 | 0 | auto text_align = m_context.containing_block().computed_values().text_align(); |
167 | 0 | auto direction = m_context.containing_block().computed_values().direction(); |
168 | |
|
169 | 0 | auto current_line_height = max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height()); |
170 | 0 | CSSPixels x_offset_top = m_context.leftmost_x_offset_at(m_current_y); |
171 | 0 | CSSPixels x_offset_bottom = m_context.leftmost_x_offset_at(m_current_y + current_line_height - 1); |
172 | 0 | CSSPixels x_offset = max(x_offset_top, x_offset_bottom); |
173 | |
|
174 | 0 | CSSPixels excess_horizontal_space = m_available_width_for_current_line.to_px_or_zero() - line_box.width(); |
175 | | |
176 | | // If (after justification, if any) the inline contents of a line box are too long to fit within it, |
177 | | // then the contents are start-aligned: any content that doesn't fit overflows the line box’s end edge. |
178 | 0 | if (excess_horizontal_space > 0) { |
179 | 0 | switch (text_align) { |
180 | 0 | case CSS::TextAlign::Center: |
181 | 0 | case CSS::TextAlign::LibwebCenter: |
182 | 0 | x_offset += excess_horizontal_space / 2; |
183 | 0 | break; |
184 | 0 | case CSS::TextAlign::Start: |
185 | 0 | if (direction == CSS::Direction::Rtl) |
186 | 0 | x_offset += excess_horizontal_space; |
187 | 0 | break; |
188 | 0 | case CSS::TextAlign::End: |
189 | 0 | if (direction == CSS::Direction::Ltr) |
190 | 0 | x_offset += excess_horizontal_space; |
191 | 0 | break; |
192 | 0 | case CSS::TextAlign::Right: |
193 | 0 | case CSS::TextAlign::LibwebRight: |
194 | 0 | x_offset += excess_horizontal_space; |
195 | 0 | break; |
196 | 0 | case CSS::TextAlign::Left: |
197 | 0 | case CSS::TextAlign::LibwebLeft: |
198 | 0 | case CSS::TextAlign::Justify: |
199 | 0 | default: |
200 | 0 | break; |
201 | 0 | } |
202 | 0 | } |
203 | | |
204 | 0 | auto strut_baseline = [&] { |
205 | 0 | auto& font = m_context.containing_block().first_available_font(); |
206 | 0 | auto const line_height = m_context.containing_block().computed_values().line_height(); |
207 | 0 | auto const font_metrics = font.pixel_metrics(); |
208 | 0 | auto const typographic_height = CSSPixels::nearest_value_for(font_metrics.ascent + font_metrics.descent); |
209 | 0 | auto const leading = line_height - typographic_height; |
210 | 0 | auto const half_leading = leading / 2; |
211 | 0 | return CSSPixels::nearest_value_for(font_metrics.ascent) + half_leading; |
212 | 0 | }(); |
213 | |
|
214 | 0 | auto line_box_baseline = [&] { |
215 | 0 | CSSPixels line_box_baseline = strut_baseline; |
216 | 0 | for (auto& fragment : line_box.fragments()) { |
217 | 0 | auto const& font = fragment.layout_node().first_available_font(); |
218 | 0 | auto const line_height = fragment.layout_node().computed_values().line_height(); |
219 | 0 | auto const font_metrics = font.pixel_metrics(); |
220 | 0 | auto const typographic_height = CSSPixels::nearest_value_for(font_metrics.ascent + font_metrics.descent); |
221 | 0 | auto const leading = line_height - typographic_height; |
222 | 0 | auto const half_leading = leading / 2; |
223 | | |
224 | | // The CSS specification calls this AD (A+D, Ascent + Descent). |
225 | |
|
226 | 0 | CSSPixels fragment_baseline = 0; |
227 | 0 | if (fragment.layout_node().is_text_node()) { |
228 | 0 | fragment_baseline = CSSPixels::nearest_value_for(font_metrics.ascent) + half_leading; |
229 | 0 | } else { |
230 | 0 | auto const& box = verify_cast<Layout::Box>(fragment.layout_node()); |
231 | 0 | fragment_baseline = m_context.box_baseline(box); |
232 | 0 | } |
233 | | |
234 | | // Remember the baseline used for this fragment. This will be used when painting the fragment. |
235 | 0 | fragment.set_baseline(fragment_baseline); |
236 | | |
237 | | // NOTE: For fragments with a <length> vertical-align, shift the line box baseline down by the length. |
238 | | // This ensures that we make enough vertical space on the line for any manually-aligned fragments. |
239 | 0 | if (auto const* length_percentage = fragment.layout_node().computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) { |
240 | 0 | if (length_percentage->is_length()) |
241 | 0 | fragment_baseline += length_percentage->length().to_px(fragment.layout_node()); |
242 | 0 | else if (length_percentage->is_percentage()) |
243 | 0 | fragment_baseline += line_height.scaled(length_percentage->percentage().as_fraction()); |
244 | 0 | } |
245 | |
|
246 | 0 | line_box_baseline = max(line_box_baseline, fragment_baseline); |
247 | 0 | } |
248 | 0 | return line_box_baseline; |
249 | 0 | }(); |
250 | | |
251 | | // Start with the "strut", an imaginary zero-width box at the start of each line box. |
252 | 0 | auto strut_top = m_current_y; |
253 | 0 | auto strut_bottom = m_current_y + m_context.containing_block().computed_values().line_height(); |
254 | |
|
255 | 0 | CSSPixels uppermost_box_top = strut_top; |
256 | 0 | CSSPixels lowermost_box_bottom = strut_bottom; |
257 | |
|
258 | 0 | for (size_t i = 0; i < line_box.fragments().size(); ++i) { |
259 | 0 | auto& fragment = line_box.fragments()[i]; |
260 | |
|
261 | 0 | CSSPixels new_fragment_x = round(x_offset + fragment.offset().x()); |
262 | 0 | CSSPixels new_fragment_y = 0; |
263 | |
|
264 | 0 | auto y_value_for_alignment = [&](CSS::VerticalAlign vertical_align) { |
265 | 0 | CSSPixels effective_box_top_offset = fragment.border_box_top(); |
266 | 0 | CSSPixels effective_box_bottom_offset = fragment.border_box_top(); |
267 | 0 | if (fragment.is_atomic_inline()) { |
268 | 0 | auto const& fragment_box_state = m_layout_state.get(static_cast<Box const&>(fragment.layout_node())); |
269 | 0 | effective_box_top_offset = fragment_box_state.margin_box_top(); |
270 | 0 | effective_box_bottom_offset = fragment_box_state.margin_box_bottom(); |
271 | 0 | } |
272 | |
|
273 | 0 | switch (vertical_align) { |
274 | 0 | case CSS::VerticalAlign::Baseline: |
275 | 0 | return m_current_y + line_box_baseline - fragment.baseline() + effective_box_top_offset; |
276 | 0 | case CSS::VerticalAlign::Top: |
277 | 0 | return m_current_y + effective_box_top_offset; |
278 | 0 | case CSS::VerticalAlign::Middle: { |
279 | | // Align the vertical midpoint of the box with the baseline of the parent box |
280 | | // plus half the x-height of the parent. |
281 | 0 | auto const x_height = CSSPixels::nearest_value_for(m_context.containing_block().first_available_font().pixel_metrics().x_height); |
282 | 0 | return m_current_y + line_box_baseline + ((effective_box_top_offset - effective_box_bottom_offset - x_height - fragment.height()) / 2); |
283 | 0 | } |
284 | 0 | case CSS::VerticalAlign::Bottom: |
285 | 0 | case CSS::VerticalAlign::Sub: |
286 | 0 | case CSS::VerticalAlign::Super: |
287 | 0 | case CSS::VerticalAlign::TextBottom: |
288 | 0 | case CSS::VerticalAlign::TextTop: |
289 | | // FIXME: These are all 'baseline' |
290 | 0 | return m_current_y + line_box_baseline - fragment.baseline() + effective_box_top_offset; |
291 | 0 | } |
292 | 0 | VERIFY_NOT_REACHED(); |
293 | 0 | }; |
294 | |
|
295 | 0 | auto const& vertical_align = fragment.layout_node().computed_values().vertical_align(); |
296 | 0 | if (vertical_align.has<CSS::VerticalAlign>()) { |
297 | 0 | new_fragment_y = y_value_for_alignment(vertical_align.get<CSS::VerticalAlign>()); |
298 | 0 | } else { |
299 | 0 | if (auto const* length_percentage = vertical_align.get_pointer<CSS::LengthPercentage>()) { |
300 | 0 | if (length_percentage->is_length()) { |
301 | 0 | auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node()); |
302 | 0 | new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount; |
303 | 0 | } else if (length_percentage->is_percentage()) { |
304 | 0 | auto vertical_align_amount = m_context.containing_block().computed_values().line_height().scaled(length_percentage->percentage().as_fraction()); |
305 | 0 | new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount; |
306 | 0 | } |
307 | 0 | } |
308 | 0 | } |
309 | |
|
310 | 0 | fragment.set_offset({ new_fragment_x, floor(new_fragment_y) }); |
311 | |
|
312 | 0 | CSSPixels top_of_inline_box = 0; |
313 | 0 | CSSPixels bottom_of_inline_box = 0; |
314 | 0 | { |
315 | | // FIXME: Support inline-table elements. |
316 | 0 | if (fragment.is_atomic_inline()) { |
317 | 0 | auto const& fragment_box_state = m_layout_state.get(static_cast<Box const&>(fragment.layout_node())); |
318 | 0 | top_of_inline_box = (fragment.offset().y() - fragment_box_state.margin_box_top()); |
319 | 0 | bottom_of_inline_box = (fragment.offset().y() + fragment_box_state.content_height() + fragment_box_state.margin_box_bottom()); |
320 | 0 | } else { |
321 | 0 | auto font_metrics = fragment.layout_node().first_available_font().pixel_metrics(); |
322 | 0 | auto typographic_height = CSSPixels::nearest_value_for(font_metrics.ascent + font_metrics.descent); |
323 | 0 | auto leading = fragment.layout_node().computed_values().line_height() - typographic_height; |
324 | 0 | auto half_leading = leading / 2; |
325 | 0 | top_of_inline_box = (fragment.offset().y() + fragment.baseline() - CSSPixels::nearest_value_for(font_metrics.ascent) - half_leading); |
326 | 0 | bottom_of_inline_box = (fragment.offset().y() + fragment.baseline() + CSSPixels::nearest_value_for(font_metrics.descent) + half_leading); |
327 | 0 | } |
328 | 0 | if (auto const* length_percentage = fragment.layout_node().computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) { |
329 | 0 | if (length_percentage->is_length()) |
330 | 0 | bottom_of_inline_box += length_percentage->length().to_px(fragment.layout_node()); |
331 | 0 | else if (length_percentage->is_percentage()) |
332 | 0 | bottom_of_inline_box += m_context.containing_block().computed_values().line_height().scaled(length_percentage->percentage().as_fraction()); |
333 | 0 | } |
334 | 0 | } |
335 | |
|
336 | 0 | uppermost_box_top = min(uppermost_box_top, top_of_inline_box); |
337 | 0 | lowermost_box_bottom = max(lowermost_box_bottom, bottom_of_inline_box); |
338 | 0 | } |
339 | | |
340 | | // 3. The line box height is the distance between the uppermost box top and the lowermost box bottom. |
341 | 0 | line_box.m_height = lowermost_box_bottom - uppermost_box_top; |
342 | |
|
343 | 0 | line_box.m_bottom = m_current_y + line_box.m_height; |
344 | 0 | line_box.m_baseline = line_box_baseline; |
345 | 0 | } |
346 | | |
347 | | void LineBuilder::remove_last_line_if_empty() |
348 | 0 | { |
349 | | // If there's an empty line box at the bottom, just remove it instead of giving it height. |
350 | 0 | auto& line_boxes = m_containing_block_used_values.line_boxes; |
351 | 0 | if (!line_boxes.is_empty() && line_boxes.last().is_empty()) { |
352 | 0 | line_boxes.take_last(); |
353 | 0 | m_last_line_needs_update = false; |
354 | 0 | } |
355 | 0 | } |
356 | | |
357 | | void LineBuilder::recalculate_available_space() |
358 | 0 | { |
359 | 0 | auto current_line_height = max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height()); |
360 | 0 | auto available_at_top_of_line_box = m_context.available_space_for_line(m_current_y); |
361 | 0 | auto available_at_bottom_of_line_box = m_context.available_space_for_line(m_current_y + current_line_height - 1); |
362 | 0 | m_available_width_for_current_line = min(available_at_bottom_of_line_box, available_at_top_of_line_box); |
363 | 0 | if (!m_containing_block_used_values.line_boxes.is_empty()) |
364 | 0 | m_containing_block_used_values.line_boxes.last().m_original_available_width = m_available_width_for_current_line; |
365 | 0 | } |
366 | | |
367 | | } |