text-justify-word-separators.html (1795B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Text 6.4. Justification Method: text-justify: inter-word</title> 6 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-text/#word-separator"> 8 <link rel='match' href='text-justify-word-separators-ref.html'> 9 <meta name="assert" content="text-justify:inter-word should adjust spacing at all word separators."> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 .justified { 13 font: 10px/1 Ahem; 14 text-align: justify; 15 text-justify: inter-word; 16 width: 120px; 17 border: solid 1px black; 18 } 19 /* Hide the word separators, in case the system doesn't 20 have an appropriate font installed and shows tofu. 21 Justification should still work in this case. */ 22 .hidden { 23 color: transparent; 24 } 25 </style> 26 </head> 27 <body> 28 <!-- A normal space --> 29 <div class="justified">XXXX XXXX XXXX</div> 30 31 <!-- Non-breaking space --> 32 <div class="justified">XXXX<span class="hidden"> </span>XXXX XXXX</div> 33 34 <!-- Ethiopic word space --> 35 <div class="justified">XXXX<span class="hidden">፡</span>XXXX XXXX</div> 36 37 <!-- Aegean word separators --> 38 <div class="justified">XXXX<span class="hidden">𐄀</span>XXXX XXXX</div> 39 <div class="justified">XXXX<span class="hidden">𐄁</span>XXXX XXXX</div> 40 41 <!-- Ugaritic word divider --> 42 <div class="justified">XXXX<span class="hidden">𐎟</span>XXXX XXXX</div> 43 44 <!-- Phoenician word separator --> 45 <div class="justified">XXXX<span class="hidden">𐤟</span>XXXX XXXX</div> 46 </body> 47 </html>