mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:17:45 +00:00
LibWeb: Make text justification work between floats
While inline content between floating elements was broken correctly, text justification was still using the original amount of available space (without accounting for floats) when justifying fragments.
This commit is contained in:
Andreas Kling
parent
bab6796099
commit
e938860126
5 changed files with 237 additions and 1 deletions
|
|
@ -0,0 +1,202 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
|
||||
BlockContainer <body> at (252,10) content-size 538x398.257812 children: inline
|
||||
line 0 width: 228.339843, height: 21.835937, bottom: 21.835937, baseline: 16.914062
|
||||
frag 0 from TextNode start: 1, length: 5, rect: [554,10 63.710937x21.835937]
|
||||
"Lorem"
|
||||
frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.553385x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 7, length: 5, rect: [630.553344,10 56.621093x21.835937]
|
||||
"ipsum"
|
||||
frag 3 from TextNode start: 12, length: 1, rect: [686.553344,10 12.553385x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 13, length: 5, rect: [699.106811,10 52.050781x21.835937]
|
||||
"dolor"
|
||||
frag 5 from TextNode start: 18, length: 1, rect: [751.106811,10 12.553385x21.835937]
|
||||
" "
|
||||
frag 6 from TextNode start: 19, length: 3, rect: [763.660156,10 25.957031x21.835937]
|
||||
"sit"
|
||||
line 1 width: 183.769531, height: 22.671875, bottom: 44.507812, baseline: 16.914062
|
||||
frag 0 from TextNode start: 23, length: 5, rect: [554,31 52.714843x21.835937]
|
||||
"amet,"
|
||||
frag 1 from TextNode start: 28, length: 1, rect: [607,31 62.230468x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 29, length: 11, rect: [669.230468,31 121.054687x21.835937]
|
||||
"consectetur"
|
||||
line 2 width: 140.546875, height: 22.507812, bottom: 66.179687, baseline: 16.914062
|
||||
frag 0 from TextNode start: 41, length: 10, rect: [554,53 94.648437x21.835937]
|
||||
"adipiscing"
|
||||
frag 1 from TextNode start: 51, length: 1, rect: [649,53 105.453125x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 52, length: 5, rect: [754.453125,53 35.898437x21.835937]
|
||||
"elit."
|
||||
line 3 width: 145, height: 22.34375, bottom: 87.851562, baseline: 16.914062
|
||||
frag 0 from TextNode start: 58, length: 11, rect: [554,75 123.320312x21.835937]
|
||||
"Suspendisse"
|
||||
frag 1 from TextNode start: 69, length: 1, rect: [677,75 101x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 70, length: 1, rect: [778,75 11.679687x21.835937]
|
||||
"a"
|
||||
line 4 width: 196.699218, height: 22.179687, bottom: 109.523437, baseline: 16.914062
|
||||
frag 0 from TextNode start: 72, length: 8, rect: [554,97 82.050781x21.835937]
|
||||
"placerat"
|
||||
frag 1 from TextNode start: 80, length: 1, rect: [636,97 29.650390x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 81, length: 7, rect: [665.650390,97 73.867187x21.835937]
|
||||
"mauris,"
|
||||
frag 3 from TextNode start: 88, length: 1, rect: [739.650390,97 29.650390x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 89, length: 2, rect: [769.300781,97 20.78125x21.835937]
|
||||
"ut"
|
||||
line 5 width: 234.6875, height: 22.015625, bottom: 131.195312, baseline: 16.914062
|
||||
frag 0 from TextNode start: 92, length: 9, rect: [554,119 101.289062x21.835937]
|
||||
"elementum"
|
||||
frag 1 from TextNode start: 101, length: 1, rect: [655,119 10.4375x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 102, length: 3, rect: [665.4375,119 26.386718x21.835937]
|
||||
"mi."
|
||||
frag 3 from TextNode start: 105, length: 1, rect: [692.4375,119 10.4375x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 106, length: 5, rect: [702.875,119 56.230468x21.835937]
|
||||
"Morbi"
|
||||
frag 5 from TextNode start: 111, length: 1, rect: [758.875,119 10.4375x21.835937]
|
||||
" "
|
||||
frag 6 from TextNode start: 112, length: 2, rect: [769.3125,119 20.78125x21.835937]
|
||||
"ut"
|
||||
line 6 width: 201.523437, height: 21.851562, bottom: 152.867187, baseline: 16.914062
|
||||
frag 0 from TextNode start: 115, length: 8, rect: [554,141 78.769531x21.835937]
|
||||
"vehicula"
|
||||
frag 1 from TextNode start: 123, length: 1, rect: [633,141 27.238281x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 124, length: 6, rect: [660.238281,141 62.929687x21.835937]
|
||||
"ipsum,"
|
||||
frag 3 from TextNode start: 130, length: 1, rect: [723.238281,141 27.238281x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 131, length: 4, rect: [750.476562,141 39.824218x21.835937]
|
||||
"eget"
|
||||
line 7 width: 232.539062, height: 22.6875, bottom: 175.539062, baseline: 16.914062
|
||||
frag 0 from TextNode start: 136, length: 8, rect: [554,162 82.050781x21.835937]
|
||||
"placerat"
|
||||
frag 1 from TextNode start: 144, length: 1, rect: [636,162 11.730468x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 145, length: 6, rect: [647.730468,162 61.875x21.835937]
|
||||
"augue."
|
||||
frag 3 from TextNode start: 151, length: 1, rect: [709.730468,162 11.730468x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 152, length: 7, rect: [721.460937,162 68.613281x21.835937]
|
||||
"Integer"
|
||||
line 8 width: 202.96875, height: 22.523437, bottom: 197.210937, baseline: 16.914062
|
||||
frag 0 from TextNode start: 160, length: 6, rect: [554,184 70.3125x21.835937]
|
||||
"rutrum"
|
||||
frag 1 from TextNode start: 166, length: 1, rect: [624,184 21.010416x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 167, length: 4, rect: [645.010375,184 35.097656x21.835937]
|
||||
"nisi"
|
||||
frag 3 from TextNode start: 171, length: 1, rect: [680.010375,184 21.010416x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 172, length: 4, rect: [701.020874,184 39.824218x21.835937]
|
||||
"eget"
|
||||
frag 5 from TextNode start: 176, length: 1, rect: [741.020874,184 21.010416x21.835937]
|
||||
" "
|
||||
frag 6 from TextNode start: 177, length: 3, rect: [762.03125,184 27.734375x21.835937]
|
||||
"dui"
|
||||
line 9 width: 0, height: 0, bottom: 0, baseline: 0
|
||||
line 10 width: 208.828125, height: 22.359375, bottom: 223.882812, baseline: 16.914062
|
||||
frag 0 from TextNode start: 181, length: 7, rect: [252,211 68.984375x21.835937]
|
||||
"dictum,"
|
||||
frag 1 from TextNode start: 188, length: 1, rect: [321,211 23.585937x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 189, length: 2, rect: [344.585937,211 23.105468x21.835937]
|
||||
"eu"
|
||||
frag 3 from TextNode start: 191, length: 1, rect: [367.585937,211 23.585937x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 192, length: 8, rect: [391.171875,211 96.738281x21.835937]
|
||||
"accumsan"
|
||||
line 11 width: 180.195312, height: 22.195312, bottom: 245.554687, baseline: 16.914062
|
||||
frag 0 from TextNode start: 201, length: 4, rect: [252,233 43.867187x21.835937]
|
||||
"enim"
|
||||
frag 1 from TextNode start: 205, length: 1, rect: [296,233 37.902343x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 206, length: 10, rect: [333.902343,233 93.632812x21.835937]
|
||||
"tristique."
|
||||
frag 3 from TextNode start: 216, length: 1, rect: [427.902343,233 37.902343x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 217, length: 2, rect: [465.804687,233 22.695312x21.835937]
|
||||
"Ut"
|
||||
line 12 width: 195.273437, height: 22.03125, bottom: 267.226562, baseline: 16.914062
|
||||
frag 0 from TextNode start: 220, length: 8, rect: [252,255 80.019531x21.835937]
|
||||
"lobortis"
|
||||
frag 1 from TextNode start: 228, length: 1, rect: [332,255 30.363281x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 229, length: 5, rect: [362.363281,255 55.429687x21.835937]
|
||||
"lorem"
|
||||
frag 3 from TextNode start: 234, length: 1, rect: [417.363281,255 30.363281x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 235, length: 4, rect: [447.726562,255 39.824218x21.835937]
|
||||
"eget"
|
||||
line 13 width: 222.910156, height: 21.867187, bottom: 288.898437, baseline: 16.914062
|
||||
frag 0 from TextNode start: 240, length: 3, rect: [252,277 31.152343x21.835937]
|
||||
"est"
|
||||
frag 1 from TextNode start: 243, length: 1, rect: [283,277 16.544921x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 244, length: 9, rect: [299.544921,277 91.464843x21.835937]
|
||||
"vulputate"
|
||||
frag 3 from TextNode start: 253, length: 1, rect: [391.544921,277 16.544921x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 254, length: 8, rect: [408.089843,277 80.292968x21.835937]
|
||||
"egestas."
|
||||
line 14 width: 223.125, height: 22.703125, bottom: 311.570312, baseline: 16.914062
|
||||
frag 0 from TextNode start: 263, length: 7, rect: [252,298 68.613281x21.835937]
|
||||
"Integer"
|
||||
frag 1 from TextNode start: 270, length: 1, rect: [321,298 16.4375x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 271, length: 7, rect: [337.4375,298 71.328125x21.835937]
|
||||
"laoreet"
|
||||
frag 3 from TextNode start: 278, length: 1, rect: [408.4375,298 16.4375x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 279, length: 7, rect: [424.875,298 63.183593x21.835937]
|
||||
"lacinia"
|
||||
line 15 width: 222.617187, height: 22.539062, bottom: 333.242187, baseline: 16.914062
|
||||
frag 0 from TextNode start: 287, length: 4, rect: [252,320 43.164062x21.835937]
|
||||
"ante"
|
||||
frag 1 from TextNode start: 291, length: 1, rect: [295,320 16.691406x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 292, length: 7, rect: [311.691406,320 74.003906x21.835937]
|
||||
"sodales"
|
||||
frag 3 from TextNode start: 299, length: 1, rect: [385.691406,320 16.691406x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 300, length: 9, rect: [402.382812,320 85.449218x21.835937]
|
||||
"lobortis."
|
||||
line 16 width: 178.300781, height: 22.375, bottom: 354.914062, baseline: 16.914062
|
||||
frag 0 from TextNode start: 310, length: 5, rect: [252,342 60.898437x21.835937]
|
||||
"Donec"
|
||||
frag 1 from TextNode start: 315, length: 1, rect: [313,342 38.849609x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 316, length: 1, rect: [351.849609,342 11.679687x21.835937]
|
||||
"a"
|
||||
frag 3 from TextNode start: 317, length: 1, rect: [363.849609,342 38.849609x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 318, length: 9, rect: [402.699218,342 85.722656x21.835937]
|
||||
"tincidunt"
|
||||
line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062
|
||||
frag 0 from TextNode start: 328, length: 5, rect: [252,364 48.59375x21.835937]
|
||||
"ante."
|
||||
frag 1 from TextNode start: 333, length: 1, rect: [301,364 11.641926x21.835937]
|
||||
" "
|
||||
frag 2 from TextNode start: 334, length: 9, rect: [312.641937,364 94.765625x21.835937]
|
||||
"Phasellus"
|
||||
frag 3 from TextNode start: 343, length: 1, rect: [406.641906,364 11.641926x21.835937]
|
||||
" "
|
||||
frag 4 from TextNode start: 344, length: 1, rect: [418.283874,364 11.679687x21.835937]
|
||||
"a"
|
||||
frag 5 from TextNode start: 345, length: 1, rect: [430.283874,364 11.641926x21.835937]
|
||||
" "
|
||||
frag 6 from TextNode start: 346, length: 4, rect: [441.925781,364 46.035156x21.835937]
|
||||
"arcu"
|
||||
line 18 width: 70.546875, height: 22.046875, bottom: 398.257812, baseline: 16.914062
|
||||
frag 0 from TextNode start: 351, length: 7, rect: [252,386 70.546875x21.835937]
|
||||
"tortor."
|
||||
BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.right> at (489,213) content-size 300x200 floating [BFC] children: not-inline
|
||||
TextNode <#text>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<style>
|
||||
* {
|
||||
font: 20px SerenitySans;
|
||||
border: 1px solid black;
|
||||
}
|
||||
body {
|
||||
margin-left: 250px;
|
||||
text-align: justify;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
background: pink;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
background: wheat;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<div class=left></div>
|
||||
<div class=right></div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a placerat mauris, ut elementum mi. Morbi ut vehicula ipsum, eget placerat augue. Integer rutrum nisi eget dui dictum, eu accumsan enim tristique. Ut lobortis lorem eget est vulputate egestas. Integer laoreet lacinia ante sodales lobortis. Donec a tincidunt ante. Phasellus a arcu tortor.
|
||||
|
|
@ -193,7 +193,7 @@ void InlineFormattingContext::apply_justification_to_fragments(CSS::TextJustify
|
|||
break;
|
||||
}
|
||||
|
||||
CSSPixels excess_horizontal_space = m_available_space->width.to_px() - line_box.width();
|
||||
CSSPixels excess_horizontal_space = line_box.original_available_width() - line_box.width();
|
||||
|
||||
// Only justify the text if the excess horizontal space is less than or
|
||||
// equal to 10%, or if we are not looking at the last line box.
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@ public:
|
|||
bool is_empty_or_ends_in_whitespace() const;
|
||||
bool is_empty() const { return m_fragments.is_empty() && !m_has_break; }
|
||||
|
||||
CSSPixels original_available_width() const { return m_original_available_width; }
|
||||
|
||||
private:
|
||||
friend class BlockContainer;
|
||||
friend class InlineFormattingContext;
|
||||
|
|
@ -40,6 +42,10 @@ private:
|
|||
CSSPixels m_height { 0 };
|
||||
CSSPixels m_bottom { 0 };
|
||||
CSSPixels m_baseline { 0 };
|
||||
|
||||
// The amount of available width that was originally available when creating this line box. Used for text justification.
|
||||
CSSPixels m_original_available_width { 0 };
|
||||
|
||||
bool m_has_break { false };
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ void LineBuilder::begin_new_line(bool increment_y, bool is_first_break_in_sequen
|
|||
}
|
||||
}
|
||||
recalculate_available_space();
|
||||
ensure_last_line_box().m_original_available_width = m_available_width_for_current_line;
|
||||
m_max_height_on_current_line = 0;
|
||||
m_last_line_needs_update = true;
|
||||
|
||||
|
|
@ -335,6 +336,8 @@ void LineBuilder::recalculate_available_space()
|
|||
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);
|
||||
m_available_width_for_current_line = min(available_at_bottom_of_line_box, available_at_top_of_line_box);
|
||||
if (!m_containing_block_state.line_boxes.is_empty())
|
||||
m_containing_block_state.line_boxes.last().m_original_available_width = m_available_width_for_current_line;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue