1395926-vertical-upright-gpos-1-ref.html (879B)
1 <!DOCTYPE html> 2 3 <style> 4 @font-face { font-family: Charis; src: url(../fonts/sil/CharisSIL-R.ttf); } 5 div { writing-mode: vertical-rl; text-orientation: upright; } 6 p { position: absolute; top: 50px; } 7 .times { font: 36px Times New Roman, DejaVu Serif, serif; letter-spacing: .25em; left: 50px; } 8 .arial { font: 36px Arial, DejaVu Sans, sans-serif; letter-spacing: .25em; left: 150px; } 9 .charis { font: 36px Charis, serif; letter-spacing: .25em; left: 250px; } 10 .overlay { color: transparent; background: green; } 11 </style> 12 13 Red diacritics should <i>not</i> extend beyond the green boxes: 14 15 <div> 16 <p class="times overlay"> A̕ḅ̩c̭d̅ẻ̆̈ 17 <p class="arial overlay"> A̕ḅ̩c̭d̅ẻ̆̈ 18 <p class="charis overlay"> A̕ḅ̩c̭d̅ẻ̆̈ 19 </div>