Skip to content

Commit

Permalink
inline-bidi-markup/: Various code tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@r12a
r12a committed Jun 30, 2021
1 parent d2e8214 commit 99290ec
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 32 deletions.
56 changes: 31 additions & 25 deletions articles/inline-bidi-markup/bidi_examples.html
View file
Expand Up @@ -15,12 +15,12 @@
f.modifiers = ''; // people making substantive changes, and their affiliation
f.searchString = 'article-inline-bidi-markup'; // blog search string - usually the filename without extensions
f.firstPubDate = '2003-09-29'; // date of the first publication of the document (after review)
f.lastSubstUpdate = { date:'2021-05-07', time:'12:43'} // date and time of latest substantive changes to this document
f.lastSubstUpdate = { date:'2021-06-25', time:'12:43'} // date and time of latest substantive changes to this document
f.status = 'published'; // should be one of draft, review, published, or notreviewed
f.path = '../../' // what you need to prepend to a URL to get to the /International directory

// AUTHORS AND TRANSLATORS should fill in these assignments:
f.thisVersion = { date:'2021-05-07', time:'12:43'} // date and time of latest edits to this document/translation
f.thisVersion = { date:'2021-06-25', time:'12:43'} // date and time of latest edits to this document/translation
f.contributors = ''; // people providing useful contributions or feedback during review or at other times
// also make sure that the lang attribute on the html tag is correct!

Expand All @@ -35,8 +35,6 @@
<script src="../../javascript/doc-structure/article.js"> </script>
<script src="../../javascript/articletoc-html5.js"></script>
<link rel="stylesheet" href="../../style/article-2016.css" />
<link rel="copyright" href="#copyright"/>
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
.injectionexamples {
margin: 0 0 0px 0;
Expand Down Expand Up @@ -76,21 +74,26 @@ <h1>Inline bidi markup examples</h1>
</header>


<section>
<div id="audience">
<!--p><span id="intendedAudience" class="leadin">Intended audience:</span> content developers working with right-to-left scripts, HTML and SVG coders (using editors or scripting), script developers (PHP, JSP, etc.), schema developers (DTDs, XML Schema, RelaxNG, etc.), and anyone who is struggling to understand how to make their mixed direction text look right in markup.</p-->
<div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
</div>
<div class="insideinfonote noprint">
<p class="info">Many examples in this document are shown as images to avoid problems for those with a browser that doesn't produce what was intended or doesn't have non-ASCII fonts.</p>
<div>
<div id="audience">
<!--p><span id="intendedAudience" class="leadin">Intended audience:</span> content developers working with right-to-left scripts, HTML and SVG coders (using editors or scripting), script developers (PHP, JSP, etc.), schema developers (DTDs, XML Schema, RelaxNG, etc.), and anyone who is struggling to understand how to make their mixed direction text look right in markup.</p-->
<div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
</div>

<div class="insideinfonote noprint">
<p class="info">Many examples in this document are shown as images to avoid problems for those with a browser that doesn't produce what was intended or doesn't have non-ASCII fonts.</p>
<p>Code samples containing Arabic and Hebrew text <a class="print" href="http://www.w3.org/TR/i18n-html-tech-bidi/#bidisource"> may be displayed in different ways</a> depending on which editor is used. In this article right-to-left text in code samples is represented by UPPERCASE TRANSLATIONS, and left-to-right text by lowercase. All text in code samples reflects the direction of characters as stored in memory, rather than the displayed result. The original version of text in uppercase translations would be read from right-to-left.</p>
<p> To see the full source, click on the &quot;Test in your browser&quot; links and view the source of the page that displays.</p>
</div>
<p>It is common for content in Arabic, Hebrew, and other languages that use right-to-left scripts to include numerals or include text from other scripts. Both of these typically flow left-to-right within the overall right-to-left context. </p>
<p>This article provides a series of worked examples in HTML that support the advice in the companion article, <cite><a class="print" href="/International/articles/inline-bidi-markup/">Inline markup and bidirectional text in HTML</a></cite>.</p>
<p> To see the full source, click on the &quot;Test in your browser&quot; links and view the source of the page that displays.</p>
</div>
<p>It is common for content in Arabic, Hebrew, and other languages that use right-to-left scripts to include numerals or include text from other scripts. Both of these typically flow left-to-right within the overall right-to-left context. </p>
<p>This article provides a series of worked examples in HTML that support the advice in the companion article, <cite><a class="print" href="/International/articles/inline-bidi-markup/">Inline markup and bidirectional text in HTML</a></cite>.</p>
<p>It also describes a number of elements, attributes and characters that are commonly used for managing text direction in HTML.</p>
</section>
</div>





<section>
<h2 id="aboutmarkup"><a href="#aboutmarkup">Useful markup and control codes</a></h2>
<section>
Expand Down Expand Up @@ -160,11 +163,14 @@ <h3 id="bdo"><a href="#bdo">The <code translate="no" class="kw">bdo</code> eleme
<p><a target="_blank" href="https://www.w3.org/International/i18n-tests/results/the-bdo-element">See test results for major browsers</a>.</p>
</aside>
</div>
<p>There are important use cases for <code class="kw" translate="no">bdo</code>, but they are rare. For more information see <a href="#override">Overriding the algorithm</a> below. <strong>Do not confuse this element with <code class="kw" translate="no">bdi</code>, and do not use it for managing normal bidi text.</strong></p>
<p>There are important use cases for <code class="kw" translate="no">bdo</code>, but they are rare. For more information see <a href="index#override">Overriding the algorithm</a>. <strong>Do not confuse this element with <code class="kw" translate="no">bdi</code>, and do not use it for managing normal bidi text.</strong></p>
</section>

<section>
<h3 id="cssshim"><a href="#cssshim">The CSS shim</a></h3>




<section>
<h3 id="cssshim"><a href="#cssshim">The CSS shim</a></h3>
<div class="sidenoteGroup">
<p>The CSS shim can be applied when a browser supports the CSS needed to isolate text, but doesn't support isolation for the <code class="kw" translate="no">dir</code> attribute. It was particularly useful during the transition period, while several major browsers had still not implemented isolation for the <code class="kw" translate="no">dir</code> attribute but did support the necessary CSS.</p>
<aside class="implnote">
Expand Down Expand Up @@ -199,10 +205,10 @@ <h3 id="cssshim"><a href="#cssshim">The CSS shim</a></h3>

<section>
<h2 id="staticexamples"><a href="#staticexamples">Worked examples for static use cases</a></h2>
<p>In this section we will look at how to write code that addresses various use cases where the content is written by the author. The section following this deals with use cases where content is injected into the page.
<section> </section>
</p>

<p>In this section we look at how to write code that addresses various use cases where the content is written by the author. The section following this deals with use cases where content is injected into the page.</p>


<section>
<h3 id="usecase1"><a href="#usecase1">Use case 1: Nested bidi</a></h3>
<p> A right-to-left book title is <strong>embedded</strong> in a left-to-right context, and the book title itself contains an embedded left-to-right phrase. Here is the code without any additional bidi markup:</p>
Expand Down
13 changes: 6 additions & 7 deletions articles/inline-bidi-markup/index.html
View file
Expand Up @@ -15,12 +15,12 @@
f.modifiers = ''; // people making substantive changes, and their affiliation
f.searchString = 'article-inline-bidi-markup'; // blog search string - usually the filename without extensions
f.firstPubDate = '2003-09-29'; // date of the first publication of the document (after review)
f.lastSubstUpdate = { date:'2021-05-07', time:'12:43'} // date and time of latest substantive changes to this document
f.lastSubstUpdate = { date:'2021-06-25', time:'12:43'} // date and time of latest substantive changes to this document
f.status = 'published'; // should be one of draft, review, published, or notreviewed
f.path = '../../' // what you need to prepend to a URL to get to the /International directory

// AUTHORS AND TRANSLATORS should fill in these assignments:
f.thisVersion = { date:'2021-05-07', time:'12:43'} // date and time of latest edits to this document/translation
f.thisVersion = { date:'2021-06-25', time:'12:43'} // date and time of latest edits to this document/translation
f.contributors = ''; // people providing useful contributions or feedback during review or at other times
// also make sure that the lang attribute on the html tag is correct!

Expand All @@ -35,7 +35,6 @@
<script src="../../javascript/doc-structure/article.js"> </script>
<script src="../../javascript/articletoc-html5.js"></script>
<link rel="stylesheet" href="../../style/article-2016.css" />
<link rel="copyright" href="#copyright"/>
<style>
.injectionexamples {
margin: 0 0 0px 0;
Expand Down Expand Up @@ -77,7 +76,7 @@ <h1>Inline markup and bidirectional text in HTML</h1>
</header>


<section>
<div>
<div id="audience">
<!--p><span id="intendedAudience" class="leadin">Intended audience:</span> content developers working with right-to-left scripts, HTML and SVG coders (using editors or scripting), script developers (PHP, JSP, etc.), schema developers (DTDs, XML Schema, RelaxNG, etc.), and anyone who is struggling to understand how to make their mixed direction text look right in markup.</p-->
<div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
Expand All @@ -86,7 +85,7 @@ <h1>Inline markup and bidirectional text in HTML</h1>
<p>This article tells you how to write HTML where text with different writing directions is mixed <em>within a paragraph or other HTML block</em> (ie. <dfn id="term_inline">inline or phrasal</dfn> content).</p>
<p class="info">A companion article <a class="print" href="https://www.w3.org/International/questions/qa-html-dir"><cite>Structural markup and right-to-left text in HTML</cite></a> tells you how to use HTML markup for elements such as <code translate="no" class="kw">html</code>, and structural markup such as <code translate="no" class="kw">p</code> or <code translate="no" class="kw">div</code>, and forms.</p>
<p>The article is focused on markup usage in HTML, but most of the concepts are also relevant for other markup languages.</p>
</section>
</div>


<div id="nutshell">
Expand Down Expand Up @@ -422,7 +421,7 @@ <h2 id="mirrored"><a href="#mirrored">Mirrored characters</a></h2>
<section>
<h2 id="override"><a href="#override">Overriding the algorithm</a></h2>
<p>There may be occasions where you don't want the bidi algorithm to do its reordering work at all. In these cases you need some additional
markup to surround the text you want left unordered. In HTML this is achieved using the inline <span class="kw">bdo</span> element. Note that you shouldn't find yourself using <code class="kw" translate="no">bdo</code> for normal management of bidi text – it's only for special cases, mostly educational. And don't confuse it with <code class="kw" translate="no"><a href="#bdi">bdi</a></code>. </p>
markup to surround the text you want left unordered. In HTML this is achieved using the inline <span class="kw">bdo</span> element. Note that you shouldn't find yourself using <code class="kw" translate="no">bdo</code> for normal management of bidi text – it's only for special cases, mostly educational. And don't confuse it with <code class="kw" translate="no"><a href="bidi_examples#bdi">bdi</a></code>.</p>
<p>Examples that show the characters as ordered in memory use the <code translate="no" class="kw">bdo</code> tag to achieve that effect. You must provide a <code class="kw" translate="no">dir</code> attribute with the <code class="kw" translate="no">bdo</code> element, and the value must be either <code class="kw" translate="no">rtl</code> or <code class="kw" translate="no">ltr</code> (it cannot be <code class="kw" translate="no">auto</code>). For example, the picture below shows Hebrew text as ordered in memory.</p>
<div class="figWrap">
<figure>
Expand Down Expand Up @@ -461,7 +460,7 @@ <h2 id="endlinks"><a href="#endlinks">Further reading</a></h2>
<p><a href="http://www.unicode.org/reports/tr9/"><cite>Unicode Standard Annex #9, The Unicode Bidirectional Algorithm</cite></a></p>
</li>
<li>
<p><a href="http://r12a.github.io/scripts/tutorial/part4" title="A tutorial on writing systems characteristics"><cite>Non-Latin scripts tutorial, Text direction</cite></a></p>
<p><a href="https://r12a.github.io/scripts/tutorial/part4" title="A tutorial on writing systems characteristics"><cite>Non-Latin scripts tutorial, Text direction</cite></a></p>
</li>
<li>
<p>Related links, <cite>Authoring HTML &amp; CSS</cite></p>
Expand Down

0 comments on commit 99290ec

Please sign in to comment.