hanging-whitespace-001.tentative.html (1486B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text Level 3: glyphs can only hang at the edge of a line</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-3/#hanging"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-phase-2"> 7 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <meta name="assert" content="Glyphs can't hang at the end of the line if there are non-hanging glyphs after them in the line"> 10 11 <style> 12 div { 13 font: 25px/1 Ahem; 14 width: 5ch; 15 height: 4ch; 16 margin-left: -1ch; 17 background: 18 linear-gradient(red, red) 1ch 0 / 4ch 1ch no-repeat, 19 linear-gradient(green, green) 1ch 0 / 4ch 4ch no-repeat; 20 21 text-align: right; 22 white-space: normal; 23 } 24 span { 25 color: transparent; 26 background: green; 27 } 28 .break-spaces { 29 white-space: break-spaces; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 35 <div><span>X　　</span><span class="break-spaces"> </span></div> 36 37 <!-- 38 With white-space: normal, ideographic spaces (U+3000) are preserved but do 39 hang. But here they are followed by spaces with white-space: break-spaces, 40 which are preserved and never hang. Since only glyphs at the edge of a line 41 can hang, this prevents the ideographic spaces from hanging. 42 -->