OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../resources/ahem.js"></script> | 2 <script src="../../resources/ahem.js"></script> |
3 <p>There should be 5 short vertical lines below.</p> | 3 <p>There should be 5 short vertical lines below.</p> |
4 <div style="columns:6; column-gap:2px; column-rule:2px solid; width:250px; font:
20px/14px Ahem;"> | 4 <div style="columns:6; column-gap:2px; column-rule:2px solid; width:250px; font:
20px/14px Ahem; orphans:1; widows:1;"> |
5 <!-- We set a 20px tall font and a line height of 14px, so that text will ov
erflow their line | 5 <!-- We set a 20px tall font and a line height of 14px, so that text will ov
erflow their line |
6 boxes. We thus get 6px of overflow, and the text will overflow the line
equally above and | 6 boxes. We thus get 6px of overflow, and the text will overflow the line
equally above and |
7 below the line box, so that we have 3px on each side. The 3px of overfl
ow below the lines | 7 below the line box, so that we have 3px on each side. The 3px of overfl
ow below the lines |
8 needs to be counted as space shortage by the column balancer, or it wil
l erroneously | 8 needs to be counted as space shortage by the column balancer, or it wil
l erroneously |
9 stretch the columns so much that two lines of text will fit in each col
umn, leaving empty | 9 stretch the columns so much that two lines of text will fit in each col
umn, leaving empty |
10 columns at the end. Which would be silly, given that we have 6 lines of
equal height and 6 | 10 columns at the end. Which would be silly, given that we have 6 lines of
equal height and 6 |
11 columns. --> | 11 columns. --> |
12 | 12 |
13 <br> | 13 <br> |
14 <br> | 14 <br> |
15 <br> | 15 <br> |
16 <br> | 16 <br> |
17 <br> | 17 <br> |
18 <br> | 18 <br> |
19 </div> | 19 </div> |
OLD | NEW |