Skip to content

Commit 42b6038

Browse files
r12ar12a
authored
Merge pull request #183 from r12a/gh-pages
gap-analysis: Expanded information on quotations
2 parents 3541943 + fdd0ac9 commit 42b6038

File tree

9 files changed

+307
-2
lines changed

9 files changed

+307
-2
lines changed

‎gap-analysis/index.html‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -217,12 +217,27 @@ <h3>Text boundaries &amp; selection</h3>
217217

218218

219219

220-
<section id="quotations" class="basic">
220+
<section id="quotations" class="advanced">
221221
<h3>Quotations</h3>
222222
<p class="status_prompt">Are there any issues when dealing with quotations marks, especially when nested? Should block quotes be indented or handled specially? <a href="http://w3c.github.io/typography/index#quotations">See available information</a> or <a href="https://github.com/w3c/i18n-activity/issues?utf8=%E2%9C%93&amp;q=is%3Aissue%20is%3Aopen%20label%3Aquotations%20label%3Atype-info-request%20label%3Aarabic">check for currently needed data</a>.</p>
223+
<section id="q_defaults">
224+
<h4><a href="#q_defaults">Default quotation marks for q element</a></h4>
225+
<p>If the <code class="kw" translate="no">html</code> tag sets the language of a page, the HTML specification says that the <code class="kw" translate="no">q</code> element should by default produce quotation marks according to the information in CLDR for that language.</p>
226+
<p>For <strong>Arabic</strong>, the default quote marks should be, reading right to left, “...”, and embedded quote marks ‘...’. Firefox produces these but facing in the wrong direction. (Chrome &amp; Safari are ok.) See a <a href="https://w3c.github.io/i18n-tests/results/the-q-element.html#language">test and results</a>.</p>
227+
<p>For <strong>Persian</strong>, the default quote marks should be, reading right to left, «...», and embedded quote marks ‹...›. Again, Chrome &amp; Safari are ok, but Firefox produces the wrong quotation marks, since it doesn't change them according to the language set. See a <a href="https://w3c.github.io/i18n-tests/results/the-q-element.html#language">test and results</a>.</p>
228+
</section>
229+
230+
<section id="q_section">
231+
<h4><a href="#q_section">Default quotation marks in a new language section</a></h4>
232+
<p>In addition, the default quotation marks for the <code class="kw" translate="no">q</code> element are not set to the appropriate characters by the browser when the element appears inside an Arabic/Persian section of a page that has a different overall language. This is currently per the HTML specification (both W3C and WhatWG). There is <a href="https://github.com/whatwg/html/issues/3636#issuecomment-384340053">an issue</a> raised against the WhatWG version for this to be changed.</p>
233+
</section>
223234

235+
<section id="q_multilingual">
236+
<h4><a href="#q_multilingual">Embedded quotations in a different language</a></h4>
237+
<p>Arabic/Persian quotes embedded in text in another language can also be problematic if the outer language uses different quotation marks. This is due to the browsers choosing default quotation marks based on the language of the <em>quotation</em>, rather than that of the surrounding text. See <a href="https://w3c.github.io/i18n-tests/results/the-q-element.html#ml_nesting">a test</a>. This behaviour is specified in the WhatWG version of the HTML spec, but no longer in the W3C version. There is <a href="https://github.com/whatwg/html/issues/3636#issuecomment-384340053">an issue</a> raised against the WhatWG version for this to be changed.</p>
238+
</section>
224239

225-
<p>In HTML and CSS the styling applied to nested multilingual quotations when using the <code class="kw" translate="no">q</code> element chooses quotation marks based on the language of the text inside the quotation, rather than outside.</p>
240+
<p>Marking all the above as advanced, because use of the <code class="kw" translate="no">q</code> element is optional (quote characters can be used instead), and it can be styled using CSS for the general case.</p>
226241
</section>
227242

228243

‎gap-analysis/tests/allah_ligation/allah_ligation_000.html‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Lao line break</title>
6+
<link rel="author" title="r12a" href="mailto:ishida@w3.org">
7+
<style>
8+
.test, .ref {
9+
}
10+
11+
/* the CSS below is not part of the test */
12+
.test, .ref {
13+
margin: 2em 5%;
14+
font-size: 2em;
15+
}
16+
.test {
17+
width: 90%;
18+
font-size: 48px;
19+
border: 1px solid orange;
20+
}
21+
th { font-size: 50%; padding: 10px; text-align: left; }
22+
th span { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 16px; font-weight: normal; font-style: italic;}
23+
td { padding: .1em .5em; }
24+
#assertion, .advice { font-style: italic; color: #666; }
25+
</style>
26+
</head>
27+
<body>
28+
29+
<div id="assertion"><b class="assertion">Assertion:</b> A font will produce ligated forms for 'Allah' for the sequence alef, lam, lam, shadda, superscript alif, heh (or heh goal), but not if shadda and sup. alef are missing.</div>
30+
<div class="advice"><b class="advice">Advice:</b> The right-hand column shows the precomposed character (which ought not to be used). You can change the font for the first row of data using the controls below.</div>
31+
32+
<div class="control">Change the font:<br>
33+
<select id="fontList" name="fontList" onchange="document.getElementById('testrow').style.fontFamily=this.value; document.getElementById('fontFamily').textContent=this.value; return false;">
34+
<option value="0">Select...</option>
35+
36+
<optgroup label="Mac fonts ">
37+
<option value="Al Bayan">Al Bayan</option>
38+
<option value="Baghdad">Baghdad</option>
39+
<option value="Decotype Naskh">Decotype Naskh</option>
40+
<option value="Geeza Pro">Geeza Pro</option>
41+
<option value="KufiStandardGK">KufiStandardGK</option>
42+
<option value="Nadeem">Nadeem</option>
43+
<option value="Damascus">Damascus</option>
44+
</optgroup>
45+
46+
<optgroup label="Windows fonts ">
47+
<option value="Arabic Typesetting">Arabic Typesetting</option>
48+
<option value="Aldhabi">Aldhabi</option>
49+
<option value="Andalus">Andalus</option>
50+
<option value="Microsoft Uighur">Microsoft Uighur </option>
51+
<option value="Sakkal Majalla">Sakkal Majalla</option>
52+
<option value="Simplified Arabic">Simplified Arabic</option>
53+
<option value="Simplified Arabic Fixed">Simplified Arabic Fixed</option>
54+
<option value="Traditional Arabic">Traditional Arabic</option>
55+
<option value="Urdu Typesetting">Urdu Typesetting</option>
56+
</optgroup>
57+
58+
<optgroup label="Google fonts ">
59+
<option value="Scheherazade">Scheherazade</option>
60+
<option value="Noto Naskh Arabic">Noto Naskh Arabic</option>
61+
<option value="Noto Nastaliq Urdu">Noto Nastaliq Urdu</option>
62+
<option value="Noto Nastaliq Urdu Draft">Noto Nastaliq Urdu Draft</option>
63+
</optgroup>
64+
65+
<optgroup label="Other fonts ">
66+
<option value="Amiri">Amiri</option>
67+
<option value="Arabic Transparent">Arabic Transparent</option>
68+
<option value="Farsi Simple">Farsi Simple</option>
69+
<option value="Koodak">Koodak</option>
70+
<option value="Koodak">Koodak</option>
71+
<option value="IranNastaliq">IranNastaliq</option>
72+
<option value="mry_KacstQurn">mry_KacstQurn</option>
73+
<option value="Nafees Naskh">Nafees Naskh</option>
74+
<option value="Nafees Pakistani Naskh">Nafees Pakistani Naskh</option>
75+
<option value="Nafees Nastaleeq">Nafees Nastaleeq</option>
76+
<option value="Nafees Web Naskh">Nafees Web Naskh</option>
77+
<option value="Nastaleeq Like">Nastaleeq Like</option>
78+
<option value="Nazli">Nazli</option>
79+
<option value="PakType Tehreer">PakType Tehreer</option>
80+
<option value="Pashtu Abdaali">Pashtu Abdaali</option>
81+
<option value="Pashtu Waziristan">Pashtu Waziristan</option>
82+
<option value="Riwaj">Riwaj</option>
83+
<option value="Roya">Roya</option>
84+
<option value="Terafik">Terafik</option>
85+
<option value="Unikurd Tishk">Unikurd Tishk</option>
86+
<option value="Unikurd Web">Unikurd Web</option>
87+
<option value="Urdu Naskh Unicode">Urdu Naskh Unicode</option>
88+
<option value="Urdu Nastaliq Unicode">Urdu Nastaliq Unicode</option>
89+
</optgroup>
90+
91+
<optgroup label="General fonts ">
92+
<option value="Arial">Arial</option>
93+
<option value="Arial Unicode MS">Arial Unicode MS</option>
94+
<option value="Code2000">Code2000</option>
95+
<option value="Courier New">Courier New</option>
96+
<option value="DejaVu Sans">DejaVu Sans</option>
97+
<option value="Tahoma">Tahoma</option>
98+
<option value="Times New Roman">Times New Roman</option>
99+
<option value="sans-serif">sans-serif</option>
100+
<option value="serif">serif</option>
101+
</optgroup>
102+
103+
</select>
104+
</div>
105+
<div class="control">Add another font:<br>
106+
<input name="fontName" id="fontName" value="" onchange="document.getElementById('testrow').style.fontFamily=this.value; document.getElementById('fontFamily').textContent=this.value; return false;">
107+
</div>
108+
109+
<div><b class="instructions">Test passes if</b> the text in each cell produces the same elements as listed in the top row (the styling will be different).</div>
110+
111+
112+
113+
<div class="test" id="test" lang="ar">
114+
<table>
115+
<thead>
116+
<tr>
117+
<td>&nbsp;</td>
118+
<th><span>alef, lam, lam, shadda, s.alif, heh</span><br/>Should ligate</th>
119+
<th><span>alef, lam, lam, shadda, s.alif, h.goal</span><br/>Should ligate</th>
120+
<th><span>alef, lam, lam, heh</span><br/>Should NOT ligate</th>
121+
<th><span>alef, lam, lam, h.goal</span><br/>Should NOT ligate</th>
122+
<th><span>alef, lam, lam, shadda, heh</span><br/>Should NOT ligate</th>
123+
<th><span>alef, lam, lam, shadda, h.goal</span><br/>Should NOT ligate</th>
124+
<th><span>precomposed</span><br/>Should show full form</th>
125+
126+
</tr>
127+
<tr>
128+
<td>&nbsp;</td>
129+
<th>eg. <img src="decomposed.png" alt=""/></th>
130+
<th>eg. <img src="decomposed_goal.png" alt=""/></th>
131+
<th>eg. <img src="no_shadda_or_alef.png" alt=""/></th>
132+
<th>eg. <img src="no_shadda_or_alef_goal.png" alt=""/></th>
133+
<th>eg. <img src="no_alef.png" alt=""/></th>
134+
<th>eg. <img src="no_alef_goal.png" alt=""/></th>
135+
<th>eg. <img src="decomposed.png" alt=""/></th>
136+
137+
</tr>
138+
</thead>
139+
<tbody>
140+
<tr id="testrow" style="font-family: 'Noto naskh arabic'">
141+
<th><span id="fontFamily">Noto naskh arabic</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
142+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
143+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
144+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
145+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
146+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
147+
<td>&#xFDF2;</td>
148+
</tr>
149+
<tr style="font-family: 'Scheherazade'">
150+
<th><span>Scheherazade</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
151+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
152+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
153+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
154+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
155+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
156+
<td>&#xFDF2;</td>
157+
</tr>
158+
<tr style="font-family: Amiri">
159+
<th><span>Amiri</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
160+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
161+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
162+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
163+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
164+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
165+
<td>&#xFDF2;</td>
166+
</tr>
167+
<tr style="font-family: 'Arial'">
168+
<th><span>Arial</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
169+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
170+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
171+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
172+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
173+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
174+
<td>&#xFDF2;</td>
175+
</tr>
176+
<tr style="font-family: 'Tahoma'">
177+
<th><span>Tahoma</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
178+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
179+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
180+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
181+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
182+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
183+
<td>&#xFDF2;</td>
184+
</tr>
185+
<tr style="font-family: 'Al Bayan'">
186+
<th><span>Al Bayan</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
187+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
188+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
189+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
190+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
191+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
192+
<td>&#xFDF2;</td>
193+
</tr>
194+
<tr style="font-family: 'Baghdad'">
195+
<th><span>Baghdad</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
196+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
197+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
198+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
199+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
200+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
201+
<td>&#xFDF2;</td>
202+
</tr>
203+
<tr style="font-family: 'Decotype Naskh'">
204+
<th><span>Decotype Naskh</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
205+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
206+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
207+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
208+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
209+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
210+
<td>&#xFDF2;</td>
211+
</tr>
212+
<tr style="font-family: 'Geeza Pro'">
213+
<th><span>Geeza Pro</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
214+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
215+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
216+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
217+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
218+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
219+
<td>&#xFDF2;</td>
220+
</tr>
221+
<tr style="font-family: 'Nadeem'">
222+
<th><span>Nadeem</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
223+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
224+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
225+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
226+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
227+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
228+
<td>&#xFDF2;</td>
229+
</tr>
230+
<tr style="font-family: 'Damascus'">
231+
<th><span>Damascus</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
232+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
233+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
234+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
235+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
236+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
237+
<td>&#xFDF2;</td>
238+
</tr>
239+
<tr style="font-family: 'Arabic Typesetting'">
240+
<th><span>Arabic Typesetting</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
241+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
242+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
243+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
244+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
245+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
246+
<td>&#xFDF2;</td>
247+
</tr>
248+
<tr style="font-family: 'Aldhabi'">
249+
<th><span>Aldhabi</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
250+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
251+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
252+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
253+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
254+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
255+
<td>&#xFDF2;</td>
256+
</tr>
257+
<tr style="font-family: 'Andalus'">
258+
<th><span>Andalus</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
259+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
260+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
261+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
262+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
263+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
264+
<td>&#xFDF2;</td>
265+
</tr>
266+
<tr style="font-family: 'Simplified Arabic'">
267+
<th><span>Simplified Arabic</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
268+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
269+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
270+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
271+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
272+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
273+
<td>&#xFDF2;</td>
274+
</tr>
275+
<tr style="font-family: 'Traditional Arabic'">
276+
<th><span>Traditional Arabic</span></th><td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x0647;</td>
277+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0670;&#x06C1;</td>
278+
<td>&#x0627;&#x0644;&#x0644;&#x0647;</td>
279+
<td>&#x0627;&#x0644;&#x0644;&#x06C1;</td>
280+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x0647;</td>
281+
<td>&#x0627;&#x0644;&#x0644;&#x0651;&#x06C1;</td>
282+
<td>&#xFDF2;</td>
283+
</tr>
284+
</tbody>
285+
</table>
286+
</div>
287+
288+
289+
</body>
290+
</html>

‎gap-analysis/tests/allah_ligation/decomposed.png‎

863 Bytes
Loading

‎gap-analysis/tests/allah_ligation/decomposed_goal.png‎

800 Bytes
Loading

‎gap-analysis/tests/allah_ligation/no_alef.png‎

863 Bytes
Loading

‎gap-analysis/tests/allah_ligation/no_alef_goal.png‎

777 Bytes
Loading

‎gap-analysis/tests/allah_ligation/no_shadda_or_alef.png‎

783 Bytes
Loading

‎gap-analysis/tests/allah_ligation/no_shadda_or_alef_goal.png‎

697 Bytes
Loading

‎gap-analysis/tests/allah_ligation/precomposed.png‎

903 Bytes
Loading

0 commit comments

Comments
 (0)