diff --git a/articles/inline-bidi-markup/index.html b/articles/inline-bidi-markup/index.html
index 41f32768..314df573 100644
--- a/articles/inline-bidi-markup/index.html
+++ b/articles/inline-bidi-markup/index.html
@@ -31,10 +31,14 @@
 </script>
 <script src="index-data/translations.js"> </script>
 <script src="../../javascript/doc-structure/article-dt.js"> </script>
-<script src="../../javascript/boilerplate-text/boilerplate-en.js"> </script><!--TRANSLATORS must change -en to the subtag for their language! -->
-<script src="../../javascript/doc-structure/article.js"> </script>
-<script src="../../javascript/articletoc-html5.js"></script>
-<link rel="stylesheet" href="../../style/article-2016.css" />
+<script src="../../javascript/boilerplate-text/boilerplate-en.js"> </script>
+<!--TRANSLATORS must change -en in the line just above to the subtag for their language! -->
+<script src="../../javascript/doc-structure/article-2022.js"> </script>
+<script src="../../javascript/articletoc-2022.js"></script>
+<link rel="stylesheet" href="../../style/article-2022.css" />
+<link rel="copyright" href="#copyright"/>
+<script src="../../javascript/prism.js"></script>
+<link rel="stylesheet" href="../../style/prism.css">
 <style>
 .injectionexamples {
 	margin: 0 0 0px 0;
@@ -76,20 +80,19 @@ <h1>Inline markup and bidirectional text in HTML</h1>
 </header>
 
 
-<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>
-  <p>Arabic, Hebrew, and other languages that use right-to-left scripts commonly include numerals or include text written in the Latin or other scripts: both of these typically flow  left-to-right within the overall right-to-left  context. </p>
-  <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>Arabic, Hebrew, and other languages that use right-to-left scripts commonly include numerals or include text written in the Latin or other scripts: both of these typically flow  left-to-right within the overall right-to-left  context. </p>
+<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>
-</div>
 
 
 <div id="nutshell">
-<h2 id="quick"><a href="#quick">Quick answer</a></h2>
+<h2 id="quick">Quick answer</h2>
 
 <p><em>The advice here is only for use with inline elements, such as <code class="kw" translate="no">span</code>, <code class="kw" translate="no">cite</code>, <code class="kw" translate="no">em</code>, etc. See the article mentioned above when working with block elements.</em></p>
 
@@ -97,17 +100,17 @@ <h2 id="quick"><a href="#quick">Quick answer</a></h2>
 
 <p><strong>If you know the direction of all the text involved</strong>, <a class="termref" href="#tightwrap">tightly wrap</a> <em>every</em> <a class="termref" href="#oppositedirection">opposite-direction phrase</a> in markup, and use the <code translate="no" class="kw">dir</code> attribute on  that markup. Be sure to nest markup to show the structure.</p>
   <figure class="example">
-    <p><code>&lt;p&gt;the title is &lt;cite dir=&quot;rtl&quot;&gt;AN INTRODUCTION TO &lt;span dir=&quot;ltr&quot;&gt;c++&lt;/span&gt;&lt;/cite&gt; in arabic.&lt;/p&gt;</code></p>
+    <p><code class="language-html">&lt;p&gt;the title is &lt;cite dir=&quot;rtl&quot;&gt;AN INTRODUCTION TO &lt;span dir=&quot;ltr&quot;&gt;c++&lt;/span&gt;&lt;/cite&gt; in arabic.&lt;/p&gt;</code></p>
       <div class="demolink"><a href="index-data/basic_tight_wrap.html" target="_blank">Test in your browser.</a></div>
 </figure>
   <p>If  you want to bullet-proof your code for legacy or non-conformant browsers  where tightly-wrapped text is followed inline by a number or a logically-separate opposite-direction phrase, add<code translate="no" class="kw"> &amp;rlm;</code> or <code translate="no" class="kw">&amp;lrm; </code> (choose the one corresponding to the base direction of the surrounding text) immediately after  the phrase.</p>
   <figure class="example">
-    <p><code>&lt;p&gt;we find the phrase '&lt;span dir=&quot;rtl&quot;&gt;INTERNATIONALIZATION ACTIVITY&lt;/span&gt;&amp;lrm;' 5 times on the page.&lt;/p&gt;</code></p>
+    <p><code class="language-html">&lt;p&gt;we find the phrase '&lt;span dir=&quot;rtl&quot;&gt;INTERNATIONALIZATION ACTIVITY&lt;/span&gt;&amp;lrm;' 5 times on the page.&lt;/p&gt;</code></p>
 <div class="demolink"><a href="index-data/basic_bulletproof.html" target="_blank">Test in your browser.</a></div>
 </figure>
   <p><strong>If you <em>don't</em> know the direction of  text</strong> that will be inserted at run time, add <code>dir=auto</code> to any markup that tightly wraps the location. If there is no markup, wrap the  location  with a <code translate="no" class="kw">bdi</code> element.</p>
   <figure class="example">
-    <p><code class="code1">foreach $restaurant</code> <code class="code2">echo "&lt;p&gt;&lt;bdi&gt;$restaurant['name']&lt;/bdi&gt; - $restaurant['count'] reviews&lt;/p&gt;";</code> </p>
+    <p><code class="language-javascript">foreach $restaurant<br>echo "&lt;p&gt;&lt;bdi&gt;$restaurant['name']&lt;/bdi&gt; - $restaurant['count'] reviews&lt;/p&gt;";</code></p>
 <div class="demolink"><a href="index-data/basic_dir_auto.html" target="_blank">Test in your browser.</a></div>
   </figure>
 </div>
@@ -119,8 +122,8 @@ <h2 id="quick"><a href="#quick">Quick answer</a></h2>
 
 
 
-<section>
-<h2 id="how"><a href="#how">How the bidi algorithm works</a></h2>
+<section id="how">
+<h2>How the bidi algorithm works</h2>
   <p>If you're not really familiar with the Unicode Bidirectional Algorithm, then before reading further you should  read the <a href="uba-basics">basic introduction to how the bidi algorithm works</a>.</p>
 <p>If you need it, there is also a <a href="bidi_examples#aboutmarkup">description of the various elements and attributes</a> that we will refer to in this article.</p>
 </section>
@@ -131,8 +134,8 @@ <h2 id="how"><a href="#how">How the bidi algorithm works</a></h2>
 
 
 
-<section>
-  <h2 id="where"><a href="#where">Where the bidi algorithm needs help</a></h2>
+<section id="where">
+<h2>Where the bidi algorithm needs help</h2>
   <aside class="insideinfonote">
 <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>
@@ -164,8 +167,8 @@ <h2 id="where"><a href="#where">Where the bidi algorithm needs help</a></h2>
 
 
 
-<section>
-<h2 id="whattodo"><a href="#whattodo">How to mark up inline bidi text</a></h2>
+<section id="whattodo">
+<h2>How to mark up inline bidi text</h2>
 <div class="sidenoteGroup">
   <p>Here we  summarize  default guidelines for working with bidirectional inline  text. Often alternative approaches will work, but the approaches outlined here are simple to apply and should work for all cases. </p>
 <p>Sometimes, the bidirectional text will work fine without intervention – for example, when the opposite-direction phrase is a single word that is not part of a list or followed by a number. However if you want to keep life simple and avoid having to think too carefully about whether or not you need to add markup, then just follow these guidelines for <em>all</em> direction changes. Using the approaches outlined  will not cause problems where they are not needed, but may sometimes become useful later as text is edited.</p>
@@ -180,8 +183,8 @@ <h2 id="whattodo"><a href="#whattodo">How to mark up inline bidi text</a></h2>
 
 
 
-<section>
-<h3 id="html5markup"><a href="#html5markup">If you know the direction of the phrase</a></h3>
+<section id="html5markup">
+<h3>If you know the direction of the phrase</h3>
 
 <p> The best way to  address bidi issues in your content is to tightly wrap <em>every</em> <a class="termref" href="#oppositedirection">opposite-direction phrase</a> in markup that sets its base direction. By <dfn id="tightwrap">tightly wrap</dfn>, we mean that the element contains the entire opposite-direction phrase, and nothing but the opposite-direction phrase. </p>
 
@@ -334,18 +337,18 @@ <h4>Spillover effects</h4>
 </section>
 </section>
   
-  <section>
-    <h3 id="html4markup"><a href="#html4markup">If you don't know the direction of the phrase</a></h3>
+  <section id="html4markup">
+<h3>If you don't know the direction of the phrase</h3>
 <p>When text will be added at run time to your HTML page you may not be able to predict the base direction of the injected text in advance. To handle this eventuality you have two options.</p>
 
 <p>If the phrase is tightly wrapped by an element already, you could just add <code>dir="auto"</code> to that element. This directionally isolates the element's text and looks at the first strong character to determine what base direction to apply.</p>
 <div class="example">
-<p><code translate="no" class="kw">&lt;p&gt;</code>static-text <code translate="no" class="kw">&lt;cite dir=&quot;auto&quot;&gt;</code><em>injected-text</em><code translate="no" class="kw">&lt;/cite&gt;&lt;/p&gt;</code></p>
+<p><code translate="no" class="language-html">&lt;p&gt;static-text &lt;cite dir=&quot;auto&quot;&gt;<em>injected-text</em>&lt;/cite&gt;&lt;/p&gt;</code></p>
 </div>
 
 <p>Otherwise, wrap the phrase in a <code translate="no" class="kw">bdi</code> element (or in a <code translate="no" class="kw">span</code> element with <code class="kw" translate="no">dir</code> set to <code class="kw" translate="no">auto</code>, if you prefer.) Without a <code translate="no" class="kw">dir</code> attribute, the <code translate="no" class="kw">bdi</code> element behaves as if <code>dir=&quot;auto&quot;</code> had been applied.</p>
 <div class="example">
-<p><code translate="no" class="kw">&lt;p&gt;</code>static-text <code translate="no" class="kw">&lt;bdi&gt;</code><em>injected-text</em><code translate="no" class="kw">&lt;/bdi&gt;&lt;/p&gt;</code></p>
+<p><code translate="no" class="language-html">&lt;p&gt;static-text &lt;bdi&gt;<em>injected-text</em>&lt;/bdi&gt;&lt;/p&gt;</code></p>
 </div>
 </section>
 </section>
@@ -356,14 +359,14 @@ <h3 id="html4markup"><a href="#html4markup">If you don't know the direction of t
 
 
 
-<section>
-<h2 id="nomarkup"><a href="#nomarkup">What if I can't use markup?</a></h2>
+<section id="nomarkup">
+<h2>What if I can't use markup?</h2>
   <p>There are some situations where you may not be able to use the markup described in the previous section. In HTML these include the <code translate="no" class="kw"><code translate="no" class="kw">title</code></code> element and any attribute value.</p>
   <p>In these situations you have to use the invisible Unicode characters	that	produce	the	same results.</p>
-  <p>To replicate the effect of the markup described in the example above related to nested base directions, we can use pairs of characters to surround the embedded text. The first character is one of <span class="uname">⁧ U+2067 RIGHT-TO-LEFT ISOLATE (RLI)</span> or <span class="uname">⁦ U+2066 LEFT-TO-RIGHT ISOLATE (LRI)</span>. These are placed in the same location as the opening <code class="kw" translate="no">&lt;span dir=&quot;...&quot;&gt; </code> tag. The second character is<span class="uname"> ⁩ U+2069 POP DIRECTIONAL ISOLATE (PDI</span>), and it corresponds to the <code class="kw" translate="no">&lt;/span&gt;</code><code></code> in the markup. Here's an example.</p>
+  <p>To replicate the effect of the markup described in the example above related to nested base directions, we can use pairs of characters to surround the embedded text. The first character is one of <span class="uname">⁧ U+2067 RIGHT-TO-LEFT ISOLATE (RLI)</span> or <span class="uname">⁦ U+2066 LEFT-TO-RIGHT ISOLATE (LRI)</span>. These are placed in the same location as the opening <code class="kw" translate="no">&lt;span dir=&quot;...&quot;&gt; </code> tag. The second character is<span class="uname"> ⁩ U+2069 POP DIRECTIONAL ISOLATE (PDI</span>), and it corresponds to the <code class="kw" translate="no">&lt;/span&gt;</code> in the markup. Here's an example.</p>
   <div class="sidenoteGroup">
     <figure class="example">
-<p><code>&lt;title&gt;the title says  &quot;&amp;#x2066;<span dir="rtl">INTERNATIONALIZATION ACTIVITY, w3c</span>&amp;#x2069;&quot; in hebrew.&lt;/title&gt;</code></p>
+<p><code class="language-html">&lt;title&gt;the title says  &quot;&amp;#x2066;<span dir="rtl">INTERNATIONALIZATION ACTIVITY, w3c</span>&amp;#x2069;&quot; in hebrew.&lt;/title&gt;</code></p>
 <div class="demolink"><a href="index-data/rle.html" target="_blank">Test in your browser.</a></div>
     </figure>
     <aside class="sideinfonote">
@@ -375,15 +378,15 @@ <h2 id="nomarkup"><a href="#nomarkup">What if I can't use markup?</a></h2>
   <p>There is another set of characters which change the base direction: <span class="uname">U+202B RIGHT-TO-LEFT EMBEDDING (RLE)</span>, <span class="uname">U+202A LEFT-TO-RIGHT EMBEDDING (LRE)</span>, and <span class="uname"> U+202C POP DIRECTIONAL FORMATTING (PDF</span>), but they don't directionally isolate the phrases they surround, so it's best not to use them.</p>
 <p>The two characters we already met in the above text, <span class="uname">U+200F RIGHT-TO-LEFT MARK</span> (RLM) and <span class="uname">U+200E LEFT-TO-RIGHT MARK</span> (LRM) can also be used, where appropriate. In addition to the numeric references, these characters also have named entity references, <code class="kw" translate="no">&amp;rlm;</code> and <code class="kw" translate="no">&amp;lrm;</code>.</p>
   <figure class="example">
-<p><code>&lt;title&gt;the title says &quot;INTERNATIONALIZE THE WEB!&amp;rlm;&quot; in arabic.&lt;/title&gt;</code></p>
+<p><code class="language-html">&lt;title&gt;the title says &quot;INTERNATIONALIZE THE WEB!&amp;rlm;&quot; in arabic.&lt;/title&gt;</code></p>
 <div class="demolink"><a href="index-data/rlm.html" target="_blank">Test in your browser.</a></div>
   </figure>
 <p>Note that in the example just shown the Arabic text is no longer marked up for language or styling – which is one reason to use markup rather than these code points where you can.</p>
 </section>
 
 
-<section>
-<h2 id="mirrored"><a href="#mirrored">Mirrored characters</a></h2>
+<section id="mirrored">
+<h2>Mirrored characters</h2>
 <p>The Unicode Bidirectional Algorithm has  rules for displaying <dfn>mirrored characters</dfn>.  The visible shape of these characters depends on whether they are displayed in a LTR or RTL context. These are commonly pairs of characters such as parentheses, brackets, and the like, but also include some characters that are not typically paired, such as <span class="codepoint"><span lang="en" class="qchar">&#x2260;</span> [<span class="uname">U+2260 NOT EQUAL TO</span>]</span>.</p>
 <div class="sidenoteGroup">
 <div class="figWrap">
@@ -418,8 +421,8 @@ <h2 id="mirrored"><a href="#mirrored">Mirrored characters</a></h2>
 </section>
 
 
-<section>
-<h2 id="override"><a href="#override">Overriding the algorithm</a></h2>
+<section id="override">
+<h2>Overriding the algorithm</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="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>
@@ -432,7 +435,7 @@ <h2 id="override"><a href="#override">Overriding the algorithm</a></h2>
 <p>For the bottom line we would use the following markup in HTML:</p>
 <div class="sidenoteGroup">
 <figure class="example">
-<p><code>&lt;p&gt;&lt;bdo dir=&quot;ltr&quot;&gt;<span dir="rtl">INTERNATIONALIZATION ACTIVITY, w3c</span>&lt;/bdo&gt;&lt;/p&gt;</code></p>
+<p><code class="language-html">&lt;p&gt;&lt;bdo dir=&quot;ltr&quot;&gt;<span dir="rtl">INTERNATIONALIZATION ACTIVITY, w3c</span>&lt;/bdo&gt;&lt;/p&gt;</code></p>
      <div class="demolink"><a href="index-data/bdo.html" target="_blank">Test in your browser.</a></div>
 </figure>
 <p>In other XML applications, such as XHTML2, it may be implemented as a value of <code translate="no" class="kw">rlo</code> or <code translate="no" class="kw">lro</code> on the <code translate="no" class="kw">dir</code> attribute, enabling it to be applied to any element. There are also Unicode control
@@ -445,8 +448,8 @@ <h2 id="override"><a href="#override">Overriding the algorithm</a></h2>
 </section>
 
 
-<section> 
-<h2 id="endlinks"><a href="#endlinks">Further reading</a></h2>
+<section id="endlinks">
+<h2>Further reading</h2>
 <aside class="section" id="survey"> </aside><script>document.getElementById('survey').innerHTML = g.survey</script>
 
  <ul id="full-links">
diff --git a/articles/inline-bidi-markup/uba-basics-data/mirrored_chars_he.png b/articles/inline-bidi-markup/uba-basics-data/mirrored_chars_he.png
new file mode 100644
index 00000000..e6d4c41d
Binary files /dev/null and b/articles/inline-bidi-markup/uba-basics-data/mirrored_chars_he.png differ
diff --git a/articles/inline-bidi-markup/uba-basics.en.html b/articles/inline-bidi-markup/uba-basics.en.html
index b5e878ea..da3dadcd 100644
--- a/articles/inline-bidi-markup/uba-basics.en.html
+++ b/articles/inline-bidi-markup/uba-basics.en.html
@@ -4,7 +4,7 @@
 <meta charset="utf-8">
 <title>Unicode Bidirectional Algorithm basics</title>
 <meta name="description" content="What does the Unicode Bidirectional (bidi) Algorithm do, basically?">
-<script type="application/javascript">
+<script>
 var f = { }
 
 // AUTHORS should fill in these assignments:
@@ -48,12 +48,9 @@ <h1>Unicode Bidirectional Algorithm basics</h1>
 </header>
 
 
-<section>
   <div id="audience">
-    <p><span id="intendedAudience" class="leadin">Intended audience:</span> HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, schema developers (DTDs, XML Schema, RelaxNG, etc.), XSLT developers, Web project managers, and anyone who wants to get a basic idea of how the Unicode Bidirectional Algorithm supports inline bidirectional content.</p>
     <div id="updateInfo"></div><script>document.getElementById('updateInfo').innerHTML = g.updated</script>
     </div>
-  </section>
   
   
   <section id="question">