letter-spacing-ligatures-001-ref.html (820B)
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 <style> 7 @font-face { 8 font-family: 'mplus'; 9 src: url('/fonts/mplus-1p-regular.woff'); 10 } 11 div { 12 font-size: 2em; 13 font-family: mplus; 14 width: 12ch; 15 text-align: justify; 16 text-align-last: justify; 17 text-justify: inter-character; 18 font-variant-ligatures: none; 19 font-kerning: none; 20 } 21 span { 22 display: inline-block; 23 text-justify: auto; 24 } 25 .ref { color: blue;} 26 .noref { color: orange; font-variant-ligatures: initial;} 27 </style> 28 <p>Test passes if the black text looks like the blue one, not the orange one. 29 <div>office</div> 30 <div class=ref>office</div> 31 <div class=noref>o<span>ffi</span>ce</div>