Skip to content

Commit 046ba14

Browse files
fantasaifantasai
committed
[css-text] Add example of stretching Arabic with 'letter-spacing'.
PNGs created with the following code: <!-- Rendered with Firefox 29, assuming bugs therein --> <!DOCTYPE html> <style> pre { font: 30px KacstOne; margin: 0; text-align: center;} span { letter-spacing: 0.5em; } pre { float: left; border: silver; border-style: none solid; position: relative; } div { position: absolute; right: -2em; } no { color: red; } ok { color: green; } </style> <pre> الإبداع المتجدد <no><span>الإبداع المتجد</span>د</no> <ok>الإبـــــــــــــداع المتــــــــــــــجـــــــــــــدد</ok> <ok>الإبـــــــــــداع   المتــــــــــــجــــــــــــدد</ok> <ok>الإبداع   المتجدد</ok> <no>ا لإ بد ا ع  ا لمتجد د</no>
1 parent f684589 commit 046ba14

8 files changed

Lines changed: 100 additions & 14 deletions

‎css-text/Overview.bs‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2018,9 +2018,52 @@ Word Spacing: the 'word-spacing' property</h3>
20182018
Otherwise, if the UA cannot expand text from a <i>cursive script</i>
20192019
without breaking its cursive connections,
20202020
it <em>must not</em> apply spacing
2021-
between any pair of that script's <i>visually-perceived characters</i> at all.
2022-
(Both cases will result in an effective spacing of zero between such letters,
2023-
however the former will preserve the sense of stretching out the text.)
2021+
between any pair of that script's <i>visually-perceived characters</i> at all
2022+
(effectively treating each word as a single <i>visually-perceived character</i>
2023+
for the purpose of letter-spacing).
2024+
Both cases will result in an effective spacing of zero between such letters,
2025+
however the former will preserve the sense of stretching out the text.
2026+
2027+
<div class="example">
2028+
<style scoped>
2029+
.no { color: red; }
2030+
.ok { color: green; }
2031+
th em { display: block; font-size: smaller; font-weight: normal; font-style: italic; }
2032+
</style>
2033+
<p>Below are some appropriate and inappropriate examples of spacing out Arabic text.
2034+
<table class="data">
2035+
<thead>
2036+
<tr><td><img src="arabic-stretch-original.png" alt="">
2037+
<td>&mdash;
2038+
<td>Original text
2039+
<tbody>
2040+
<tr><td><img src="arabic-stretch-spaced.png" alt="">
2041+
<td class="no">BAD
2042+
<th>Even distribution of space between each letter.
2043+
<em>Notice this breaks cursive joins!</em>
2044+
<tr><td><img src="arabic-stretch-kashida.png" alt="">
2045+
<td class="ok">OK
2046+
<th>Distributing &sum;<var>letter-spacing</var> by typographically-appropriate cursive elongation.
2047+
<tr><td><img src="arabic-stretch-suppressed.png" alt="">
2048+
<td class="ok">OK
2049+
<th>Suppressing 'letter-spacing' between Arabic letters.
2050+
<em>Notice 'letter-spacing' is nonetheless applied to non-Arabic characters (like spaces).</em>
2051+
<tr><td><img src="arabic-stretch-unjoined.png" alt="">
2052+
<td class="no">BAD
2053+
<th>Applying 'letter-spacing' only between non-joined letters.
2054+
<em>This distorts typographic color and obfuscates word boundaries.</em>
2055+
</table>
2056+
</div>
2057+
<div class="note">
2058+
Note that proper cursive elongation of a text can vary depending on the
2059+
script, typeface, language,
2060+
location within a word, location within a line,
2061+
implementation complexity, font capabilities,
2062+
and calligraphic preferences.
2063+
It is outside the scope of CSS to define rules for such elongation.
2064+
Authors should avoid applying 'letter-spacing' to cursive scripts
2065+
unless they are prepared to accept non-interoperable results.
2066+
</div>
20242067

20252068
<h2 id="edge-effects">
20262069
Edge Effects</h2>
@@ -2395,15 +2438,15 @@ Appendix B: Default UA Stylesheet</h2>
23952438
</div>
23962439
<p class="feedback issue">If you find any issues, recommendations to add, or corrections,
23972440
please send the information to <a href="mailto:www-style@w3.org">www-style@w3.org</a>
2398-
with <kbd>[css3-text]</kbd> in the subject line.</p>
2441+
with <kbd>[css-text]</kbd> in the subject line.</p>
23992442

24002443
<h2 class="no-num" id="script-groups">
24012444
Appendix C: Cursive Scripts</h2>
24022445

24032446
<p><em>This appendix is normative.</em></p>
24042447

24052448
<p>The following scripts in Unicode 6 are considered to be <dfn title="cursive script">cursive scripts</dfn>,
2406-
and do not admit <i>justification opportunities</i> between their letters:
2449+
and do not admit gaps between their letters for either justification or 'letter-spacing':
24072450
Arabic,
24082451
Mandaic,
24092452
Mongolian,
@@ -2412,7 +2455,7 @@ Appendix C: Cursive Scripts</h2>
24122455
Syriac
24132456
<p>User agents should update this list as they update their Unicode support
24142457
to handle as-yet-unencoded cursive scripts in future versions of Unicode,
2415-
and are encourage to request the CSSWG to update this spec accordingly.
2458+
and are encouraged to ask the CSSWG to update this spec accordingly.
24162459

24172460
<h2 class="no-num" id="acknowledgements">
24182461
Acknowledgements</h2>

‎css-text/Overview.html‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2155,9 +2155,52 @@ <h3 class="heading settled heading" data-level=8.2 id=letter-spacing-property><s
21552155
Otherwise, if the UA cannot expand text from a <a data-link-type=dfn href=#cursive-script title="cursive script">cursive script</a>
21562156
without breaking its cursive connections,
21572157
it <em>must not</em> apply spacing
2158-
between any pair of that script’s <a data-link-type=dfn href=#visually-perceived-character title="visually-perceived characters">visually-perceived characters</a> at all.
2159-
(Both cases will result in an effective spacing of zero between such letters,
2160-
however the former will preserve the sense of stretching out the text.)
2158+
between any pair of that script’s <a data-link-type=dfn href=#visually-perceived-character title="visually-perceived characters">visually-perceived characters</a> at all
2159+
(effectively treating each word as a single <a data-link-type=dfn href=#visually-perceived-character title="visually-perceived character">visually-perceived character</a>
2160+
for the purpose of letter-spacing).
2161+
Both cases will result in an effective spacing of zero between such letters,
2162+
however the former will preserve the sense of stretching out the text.
2163+
2164+
<div class=example>
2165+
<style scoped>
2166+
.no { color: red; }
2167+
.ok { color: green; }
2168+
th em { display: block; font-size: smaller; font-weight: normal; font-style: italic; }
2169+
</style>
2170+
<p>Below are some appropriate and inappropriate examples of spacing out Arabic text.
2171+
<table class=data>
2172+
<thead>
2173+
<tr><td><img alt="" src=arabic-stretch-original.png>
2174+
<td>—
2175+
<td>Original text
2176+
<tbody>
2177+
<tr><td><img alt="" src=arabic-stretch-spaced.png>
2178+
<td class=no>BAD
2179+
<th>Even distribution of space between each letter.
2180+
<em>Notice this breaks cursive joins!</em>
2181+
<tr><td><img alt="" src=arabic-stretch-kashida.png>
2182+
<td class=ok>OK
2183+
<th>Distributing ∑<var>letter-spacing</var> by typographically-appropriate cursive elongation.
2184+
<tr><td><img alt="" src=arabic-stretch-suppressed.png>
2185+
<td class=ok>OK
2186+
<th>Suppressing <a class=property data-link-type=propdesc href=#propdef-letter-spacing title=letter-spacing>letter-spacing</a> between Arabic letters.
2187+
<em>Notice <a class=property data-link-type=propdesc href=#propdef-letter-spacing title=letter-spacing>letter-spacing</a> is nonetheless applied to non-Arabic characters (like spaces).</em>
2188+
<tr><td><img alt="" src=arabic-stretch-unjoined.png>
2189+
<td class=no>BAD
2190+
<th>Applying <a class=property data-link-type=propdesc href=#propdef-letter-spacing title=letter-spacing>letter-spacing</a> only between non-joined letters.
2191+
<em>This distorts typographic color and obfuscates word boundaries.</em>
2192+
</table>
2193+
</div>
2194+
<div class=note>
2195+
Note that proper cursive elongation of a text can vary depending on the
2196+
script, typeface, language,
2197+
location within a word, location within a line,
2198+
implementation complexity, font capabilities,
2199+
and calligraphic preferences.
2200+
It is outside the scope of CSS to define rules for such elongation.
2201+
Authors should avoid applying <a class=property data-link-type=propdesc href=#propdef-letter-spacing title=letter-spacing>letter-spacing</a> to cursive scripts
2202+
unless they are prepared to accept non-interoperable results.
2203+
</div>
21612204

21622205
<h2 class="heading settled heading" data-level=9 id=edge-effects><span class=secno>9 </span><span class=content>
21632206
Edge Effects</span><a class=self-link href=#edge-effects></a></h2>
@@ -2519,17 +2562,17 @@ <h2 class="no-num heading settled heading" id=default-stylesheet><span class=con
25192562
<pre>/* make list items and option elements align together */
25202563
li, option { text-align: match-parent; }</pre>
25212564
</div>
2522-
<p class="feedback issue" id=issue-95155fba><a class=self-link href=#issue-95155fba></a>If you find any issues, recommendations to add, or corrections,
2565+
<p class="feedback issue" id=issue-37a23328><a class=self-link href=#issue-37a23328></a>If you find any issues, recommendations to add, or corrections,
25232566
please send the information to <a href=mailto:www-style@w3.org>www-style@w3.org</a>
2524-
with <kbd>[css3-text]</kbd> in the subject line.</p>
2567+
with <kbd>[css-text]</kbd> in the subject line.</p>
25252568

25262569
<h2 class="no-num heading settled heading" id=script-groups><span class=content>
25272570
Appendix C: Cursive Scripts</span><a class=self-link href=#script-groups></a></h2>
25282571

25292572
<p><em>This appendix is normative.</em></p>
25302573

25312574
<p>The following scripts in Unicode 6 are considered to be <dfn data-dfn-type=dfn data-noexport="" id=cursive-script title="cursive script">cursive scripts<a class=self-link href=#cursive-script></a></dfn>,
2532-
and do not admit <a data-link-type=dfn href=#justification-opportunity title="justification opportunities">justification opportunities</a> between their letters:
2575+
and do not admit gaps between their letters for either justification or <a class=property data-link-type=propdesc href=#propdef-letter-spacing title=letter-spacing>letter-spacing</a>:
25332576
Arabic,
25342577
Mandaic,
25352578
Mongolian,
@@ -2538,7 +2581,7 @@ <h2 class="no-num heading settled heading" id=script-groups><span class=content>
25382581
Syriac
25392582
<p>User agents should update this list as they update their Unicode support
25402583
to handle as-yet-unencoded cursive scripts in future versions of Unicode,
2541-
and are encourage to request the CSSWG to update this spec accordingly.
2584+
and are encouraged to ask the CSSWG to update this spec accordingly.
25422585

25432586
<h2 class="no-num heading settled heading" id=acknowledgements><span class=content>
25442587
Acknowledgements</span><a class=self-link href=#acknowledgements></a></h2>
@@ -3048,6 +3091,6 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
30483091

30493092
<a href=#issue-eecd5895> ↵ </a></div><div class="feedback issue">If you find any issues, recommendations to add, or corrections,
30503093
please send the information to <a href=mailto:www-style@w3.org>www-style@w3.org</a>
3051-
with <kbd>[css3-text]</kbd> in the subject line.<a href=#issue-95155fba> ↵ </a></div>
3094+
with <kbd>[css-text]</kbd> in the subject line.<a href=#issue-37a23328> ↵ </a></div>
30523095

30533096
</div>

‎css-text/arabic-stretch-kashida.png‎

3.27 KB
Loading

‎css-text/arabic-stretch-original.png‎

2.89 KB
Loading

‎css-text/arabic-stretch-spaced.png‎

2.6 KB
Loading

‎css-text/arabic-stretch-suppressed.png‎

3.24 KB
Loading

‎css-text/arabic-stretch-unjoined.png‎

2.56 KB
Loading

‎css-text/arabic-stretch.png‎

14.2 KB
Loading

0 commit comments

Comments
 (0)