<h1>A comparison of physical and logical directions for borders</h1>

<p>Given the requirement is to have a box with a run of text within it with the following characteristics:</p>
<ol>
  <li>The border colour at the top edge <strong>of the run of text</strong> should be red.</li>
  <li>The border colour at the right edge <strong>of the run of text</strong> should be green.</li>
  <li>The border colour at the bottom edge <strong>of the run of text</strong> should be blue.</li>
  <li>The border colour at the left edge <strong>of the run of text</strong> should be yellow.</li>
</ol>

<p>Using physical directions requires a modification every time the writing direction changes, whereas using logical properties allows the same properties and values for all six use cases.</p>
<hr>

<section>
  <h1>Physical directions</h1>
  <div class="phy-boxes">
    <article>
      <div class="phy-box1">
        <p>This is a sentence.</p>
      </div>
      <pre><code>border-top-color: tomato;
border-right-color: limegreen;
border-bottom-color: dodgerblue;
border-left-color: gold;</code></pre>
    </article>
    
    <article>
      <div class="phy-box2" dir="rtl">
        <p lang="ar">هذه جملة.</p>
      </div>
      <pre><code>border-top-color: tomato;
border-left-color: limegreen;
border-bottom-color: dodgerblue;
border-right-color: gold;</code></pre>
    </article>
    
    <article>
      <div class="vlr phy-box3">
        <p lang="mn">ᠬᠦᠮᠦᠨ ᠪᠦᠷ ᠲᠥᠷᠥᠵᠦ ᠮᠡᠨᠳᠡᠯᠡᠬᠦ ᠡᠷᠬᠡ ᠴᠢᠯᠥᠭᠡ ᠲᠡᠢ᠂ </p>
      </div>
      <pre><code>border-left-color: tomato;
border-bottom-color: limegreen;
border-right-color: dodgerblue;
border-top-color: gold;</code></pre>
    </article>
    
    <article>
      <div class="vlr phy-box4" dir="rtl">
        <p>هذه جملة.</p>
      </div>
      <pre><code>border-left-color: tomato;
border-top-color: limegreen;
border-right-color: dodgerblue;
border-bottom-color: gold;</code></pre>
    </article>
    
    <article>
      <div class="vrl phy-box5">
        <p lang="zh-hant">這是一個句子。</p>
      </div>
      <pre><code>border-right-color: tomato;
border-bottom-color: limegreen;
border-left-color: dodgerblue;
border-top-color: gold;</code></pre>
    </article>
    
    <article>
      <div class="vrl phy-box6" dir="rtl">
        <p><span lang="he">זה משפט.</span> <span lang="zh-hant" dir="ltr">這是一個句子。</span></p>
      </div>
      <pre><code>border-right-color: tomato;
border-top-color: limegreen;
border-left-color: dodgerblue;
border-bottom-color: gold;</code></pre>
    </article>
  </div>
</section>

<hr>

<section>
  <h1>Logical directions</h1>
  <div class="log-boxes">
    <div class="log-box">
      <p>This is a sentence.</p>
    </div>
    <div class="log-box" dir="rtl">
      <p lang="ar">هذه جملة.</p>
    </div>
    <div class="vlr log-box">
      <p lang="mn">ᠬᠦᠮᠦᠨ ᠪᠦᠷ ᠲᠥᠷᠥᠵᠦ ᠮᠡᠨᠳᠡᠯᠡᠬᠦ ᠡᠷᠬᠡ ᠴᠢᠯᠥᠭᠡ ᠲᠡᠢ᠂ </p>
    </div>
    <div class="vlr log-box" dir="rtl">
      <p lang="ar">هذه جملة.</p>
    </div>
    <div class="vrl log-box">
      <p lang="zh-hant">這是一個句子。</p>
    </div>
    <div class="vrl log-box" dir="rtl">
      <p><span lang="he">זה משפט.</span> <span lang="zh-hant" dir="ltr">這是一個句子。</span></p>
    </div>
  </div>
  <pre><code>border-block-start-color: tomato;
border-inline-end-color: limegreen;
border-block-end-color: dodgerblue;
border-inline-start-color: gold;</code></pre>
</section>

[class$="boxes"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1em;
}

article {
  margin-bottom: 1em;
}

article > div,
[class$="box"] {
  width: 200px;
  height: 200px;
  border: 1em solid;
  position: relative;
  margin: 1em;
}

.phy-box1 {
  border-top-color: tomato;
  border-right-color: limegreen;
  border-bottom-color: dodgerblue;
  border-left-color: gold;
}

.phy-box2 {
  border-top-color: tomato;
  border-left-color: limegreen;
  border-bottom-color: dodgerblue;
  border-right-color: gold;
}

.phy-box3 {
  border-left-color: tomato;
  border-bottom-color: limegreen;
  border-right-color: dodgerblue;
  border-top-color: gold;
}

.phy-box4 {
  border-left-color: tomato;
  border-top-color: limegreen;
  border-right-color: dodgerblue;
  border-bottom-color: gold;
}

.phy-box5 {
  border-right-color: tomato;
  border-bottom-color: limegreen;
  border-left-color: dodgerblue;
  border-top-color: gold;
}

.phy-box6 {
  border-right-color: tomato;
  border-top-color: limegreen;
  border-left-color: dodgerblue;
  border-bottom-color: gold;
}

.log-box {
  border-block-start-color: tomato;
  border-inline-end-color: limegreen;
  border-block-end-color: dodgerblue;
  border-inline-start-color: gold;
}

.vlr {
  writing-mode: vertical-lr;
}

.vrl {
  writing-mode: vertical-rl;
}

pre {
  background: #2d2d2d;
  padding: 1em;
	margin: .5em 0;
	overflow: auto;
  color: #ccc;
  border-radius: 4px;
  width: max-content;
  margin: auto;
}