letter-spacing-ligatures-001.html (1158B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>text-justify:inter-character and ligatures</title> 5 <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net'> 6 <link rel='help' href='https://drafts.csswg.org/css-text-3/#letter-spacing-property'> 7 <link rel='match' href='reference/letter-spacing-ligatures-001-ref.html'> 8 <meta name=flags content="should"> 9 <meta name="assert" content="When the effective spacing between two characters is not zero (due to either justification […]), user agents should not apply optional ligatures"> 10 <style> 11 @font-face { 12 font-family: 'mplus'; 13 src: url('/fonts/mplus-1p-regular.woff'); 14 } 15 div { 16 font-size: 2em; 17 font-family: mplus; 18 width: 12ch; 19 text-align: justify; 20 text-align-last: justify; 21 text-justify: inter-character; 22 font-kerning: none; 23 } 24 span { 25 display: inline-block; 26 text-justify: auto; 27 } 28 .ref { color: blue; font-variant-ligatures: none; } 29 .noref { color: orange; } 30 </style> 31 <p>Test passes if the black text looks like the blue one, not the orange one. 32 <div>office</div> 33 <div class=ref>office</div> 34 <div class=noref>o<span>ffi</span>ce</div>