Logical properties — flip the layout to RTL, watch it hold

<div class="wrap">
    <h1>🎮 Logical properties: flip to RTL, watch it hold</h1>
    <p class="sub">
      A sidebar and a content card with an accent border, a gap, and left-aligned text. Switch the layout to
      <strong>RTL</strong> (Arabic, Hebrew, Persian) while using <strong>physical</strong> CSS
      (<code>margin-right</code>, <code>border-left</code>, <code>text-align: left</code>) — everything stays glued to the
      wrong edge. Switch to <strong>logical</strong> CSS and it mirrors automatically. Same rules, both directions.
    </p>

<div class="panel">
      <h2>1 · Controls</h2>
      <div class="controls">
        <div class="ctl">
          <span>Writing direction</span>
          <div class="seg" id="dir">
            <button data-dir="ltr" aria-pressed="true">LTR (English)</button>
            <button data-dir="rtl" aria-pressed="false">RTL (العربية)</button>
          </div>
        </div>
        <div class="ctl">
          <span>CSS model</span>
          <div class="seg" id="model">
            <button data-model="physical" aria-pressed="true">Physical</button>
            <button data-model="logical" aria-pressed="false">Logical</button>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <h2>2 · The layout</h2>
      <div class="demo">
        <div class="layout physical" id="demo" dir="ltr">
          <aside class="sidebar">Sidebar<br>nav · filters · links</aside>
          <div class="content">
            <span class="badge-new">NEW</span>
            <h3 id="hd">Logical properties</h3>
            <p id="bd">This card has an accent border on the reading-start edge, a gap before the sidebar, and text aligned to where reading begins. Watch which edge each one clings to.</p>
          </div>
        </div>
      </div>
      <div class="verdict bad" id="verdict"></div>
    </div>

<div class="panel">
      <h2>3 · The CSS applied</h2>
      <div class="code" id="code"></div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.