1 <!DOCTYPE html>
2 <html lang="en"><head>
3 <meta charset="utf-8">
4 <title>text-justify: distribute</title>
5 <link href="mailto:ishida@w3.org" rel="author" title="Richard Ishida">
6 <link href="https://drafts.csswg.org/css-text-3/#text-align-property" rel="help">
7 <meta content="text-justify:distribute means justification adjusts spacing between each pair of adjacent typographic character units." name="assert">
8 <style type="text/css">
9 .test { text-align: justify; text-justify: distribute; }
10 /* the CSS below is not part of the test */
11 .test { border: 1px solid blue; margin: 20px; width: 290px; color: blue; font: 24px/24px ahem; }
12 </style>
13 </head>
14 <body>
15 <div id="instructions">Test passes if, on the first line only, the last box is flush with the right edge, and the line is composed of boxes about one third the size of those on the second line, and with small gaps between each.</div>
16 <div class="test">XXX XXX XXX XXX XXX</div>
17
18 </body></html>