tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

1395926-vertical-upright-gpos-1.html (1147B)

      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; color: red; }
      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">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     17 <p class="times overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     18 <p class="arial">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     19 <p class="arial overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     20 <p class="charis">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     21 <p class="charis overlay">&nbsp;A&#x315;b&#x323;&#x329;c&#x32d;d&#x305;e&#x309;&#x306;&#x308;
     22 </div>