LineBuilder.cpp 16 KB

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