|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | | -<meta charset="utf-8" /> |
| 4 | +<meta charset="utf-8"> |
5 | 5 | <title>Problems with bidirectional source text in markup</title> |
6 | | -<meta name="description" content="What are some of the problems encountered when trying to write markup for bidirectional scripts?" /> |
| 6 | +<meta name="description" content="What are some of the problems encountered when trying to write markup for bidirectional scripts?"> |
7 | 7 | <script> |
8 | 8 | var f = { } |
9 | 9 |
|
|
38 | 38 | <!--TRANSLATORS must change -en in the line just above to the subtag for their language! --> |
39 | 39 | <script src="../javascript/doc-structure/article-2022.js"> </script> |
40 | 40 | <script src="../javascript/articletoc-2022.js"></script> |
41 | | -<link rel="stylesheet" href="../style/article-2022.css" /> |
42 | | -<link rel="copyright" href="#copyright"/> |
| 41 | +<link rel="stylesheet" href="../style/article-2022.css"> |
| 42 | +<link rel="copyright" href="#copyright"> |
43 | 43 | <script src="../javascript/prism.js"></script> |
44 | 44 | <link rel="stylesheet" href="../style/prism.css"> |
45 | 45 | </head> |
@@ -183,7 +183,7 @@ <h2>Editing markup</h2> |
183 | 183 |
|
184 | 184 | <section id="basedirection"> |
185 | 185 | <h2>Editing source code containing formatting characters</h2> |
186 | | -<p>If you use a Unicode control character such as the <span class="uname">RIGHT TO LEFT MARK</span> (RLM) or<span class="uname"> ZERO-WIDTH NON JOINER</span> (ZWNJ), you will not usually be able to see it in the source text, since it is invisible. It is very helpful if your editor creates visible markers for these characters.</p> |
| 186 | +<p>If you use a Unicode control character such as the <code class="uname">RIGHT TO LEFT MARK</code> (RLM) or <code class="uname">ZERO-WIDTH NON JOINER</code> (ZWNJ), you will not usually be able to see it in the source text, since it is invisible. It is very helpful if your editor creates visible markers for these characters.</p> |
187 | 187 | <p>You may think that a useful alternative is to use the pre-defined HTML character entities, <code>&rlm;</code> and <code>&zwnj;</code>, or their numeric equivalents, <code>&#x200F;</code> and<code> &#x200C;</code>. </p> |
188 | 188 | <p>Unfortunately, such an approach typically has the same problems as those described in the previous section. The following example shows what you'd see if you add <code>&x200F;</code> to bidirectional text in 3 different positions, in an editor that sets the context to RTL. In this simple example, the text doesn't get moved around, but the components of the escape do.</p> |
189 | 189 |
|
@@ -213,15 +213,15 @@ <h2>Editing source code containing formatting characters</h2> |
213 | 213 | <section id="wrapping"> |
214 | 214 | <h2>Working with examples of code</h2> |
215 | 215 |
|
216 | | -<p>Given the above, it will come as no surprise that creating examples for tutorials or articles can be tricky when they represent code snippets that contain RTL text. It is probably not helpful to show the text of the snippet as it would actually look in most editors; rather it would be necessary to apply extra, hidden markup to approximate something that keeps the syntax together and shows the logical order of the text. This would include markup that changes the base direction of the text where that is indicated by a <a class="kw" translate="no">dir</a> attribute value, or other method.</p> |
| 216 | +<p>Given the above, it will come as no surprise that creating examples for tutorials or articles can be tricky when they represent code snippets that contain RTL text. It is probably not helpful to show the text of the snippet as it would actually look in most editors; rather it would be necessary to apply extra, hidden markup to approximate something that keeps the syntax together and shows the logical order of the text. This would include markup that changes the base direction of the text where that is indicated by a <code class="kw" translate="no">dir</code> attribute value, or other method.</p> |
217 | 217 |
|
218 | 218 | <p>Often, authors get around the issue by not showing the RTL text. For example, in all the preceding examples we removed the actual Arabic text from the main explanatory example, and just showed it in the live code examples.</p> |
219 | 219 |
|
220 | 220 | <p>Other common ways to do this in English contexts involve representing the Arabic/Hebrew/etc. parts of the example code by UPPERCASE TRANSLATIONS, and by using left-to-right, all-lowercase characters for the markup and any LTR text. Often, but not always, the letters in the uppercase text are written from right to left, since this allows for more realistic positioning of punctuation. Written right-to-left the uppercase text attempts to indicate the rendered result; written left-to-right, it indicates the order of characters in memory.</p> |
221 | 221 | <p>The following provides some examples.</p> |
222 | 222 |
|
223 | 223 | <figure id="fig_uppercase" class="example"> |
224 | | -<p class="browser_output_title">Uppercase translation.</p> |
| 224 | +<p class="browser_output_title">Uppercase translation:</p> |
225 | 225 | <pre><code class="language-html"><p class="myclass" title="HEBREW">INTERNATIONALIZATION ACTIVITY!</p></code></pre> |
226 | 226 | <p class="browser_output_title">Uppercase translation with reversed direction:</p> |
227 | 227 | <pre><code class="language-html"><p class="myclass" title="WERBEH">!YTIVITCA NOITAZILANOITANRETNI</p></code></pre> |
|
0 commit comments