-
Notifications
You must be signed in to change notification settings - Fork 0
/
test-native.html
105 lines (96 loc) · 4.17 KB
/
test-native.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Colorful diacritics</title>
<link type="text/css" rel="stylesheet" href="test-native.css" />
<link type="text/css" rel="stylesheet" href="client.css" />
</head>
<body>
<h1>Summary</h1>
<p>
<strong>For languages written using diacritics,
educational materials often apply different styles
to <span class="letter">letters</span> and <span class="diacritic">diacritics</span>.</strong><br />
For example, to conjugate a verb in Hebrew,
vowel diacritics are inserted between the letters of the verb root,
and prefixes, infixes, and suffixes may be added.
<a href="http://www.ekspublishing.com/images/eb533.jpg">This image</a>
illustrates Hebrew verb conjugation for the verb root
<span lang="he" style="line-height: 0;">ש.מ.ר</span> by outlining its letters,
but it serves as a template for any similar verb root.
</p>
<p>
For a long time, web browsers have not supported this task.
This is a difficult task because letters and diacritics are
generally rendered concurrently, and thus behave similar to ligatures.
As of September 2017, Firefox has added rudimentary support for this task.
<a href="ss-fx55-native.png">Here</a> is a screenshot of this page rendered by Firefox 55/Mac.
</p>
<h1>Demo</h1>
<p>
For ease of comparison, each sentence is displayed three times:
<ul>
<li>unstyled, using <a href="https://en.wikipedia.org/wiki/Precomposed_character">precomposed characters</a>
(<a href="https://en.wikipedia.org/wiki/Unicode_equivalence#Normalization">NFC</a>)</li>
<li>unstyled, using <a href="https://en.wikipedia.org/wiki/Combining_character">combining diacritics</a> (NFD)</li>
<li>styled</li>
</ul>
</p>
<p>
JavaScript is used to split the words into clusters of base letters and diacritics,
and then wrap each cluster in a span with a corresponding class
so that the clusters can be styled in browsers that have support.
</p>
<pre>
<span class="word">
<span class="letter">M</span>
<span class="letter">a</span><span class="diacritic">&#x0304;</span>
<span class="letter">ori</span>
</span></pre>
<p>
<a href="test.html">Another demo</a> attempts to fake this task
by positioning styled copies of the letters on top of the original words.
</p>
<p>This demo has a <a href="https://github.com/hftf/colorful-diacritics">GitHub repository</a>.</p>
<main>
<h2>English</h2>
<p class="sentence" lang="en" dir="ltr">
The Māori señor served açaí phở in the café.
</p>
<h2>Greek</h2>
<p class="sentence" lang="el" dir="ltr">
Πάτερ ἡμῶν ὁ ἐν τοῖς οὐρανοῖς
</p>
<h2>Sanskrit</h2>
<p class="sentence" lang="sa" dir="ltr">
ओङ्कारार्थतया भातं तुर्योङ्काराग्रभासुरम्
</p>
<h2>Hebrew</h2>
<p class="sentence" lang="he" dir="rtl">
מַשָּׂ֥א דְבַר־יְהוָ֖ה אֶל־יִשְׂרָאֵ֑ל בְּיַ֖ד מַלְאָכִֽי
</p>
<h2>Arabic</h2>
<p class="sentence" lang="ar" dir="rtl">
بِسْمِ ٱللَّهِ ٱلرَّحْمَنِ ٱلرَّحِيمِ
</p>
<h2>Syriac</h2>
<p class="sentence" lang="syc" dir="rtl">
ܡ̣ܢ ܟܠܗܘܿܢ ܐܝܼܠܵܢܹ̈ܐ ܕܲܒ݂ܦܲܪܕܲܝܣܵܐ
</p>
<h2>Hebrew, selected letters</h2>
<!-- Different behavior if the dagesh and shva are swapped -->
<p lang="he" dir="rtl"><span class="positions" data-positions="1,2,3">
מְפַקְּחִים
</span></p>
<h2>Arabic, selected letters</h2>
<p lang="ar" dir="rtl"><span class="positions" data-positions="1,2,3">
تُفُعِّلْتُمَا
</span></p>
<p lang="ar" dir="rtl"><span class="positions" data-positions="1,2,3">
تَفْعَلَانِ
</span></p>
</main>
<script type="text/javascript" src="test-native.js"></script>
</body>
</html>