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