<div class="controls"> 
  <label for="dir">dir:</label>
  <select id="dir">
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
  </select>
  
  <label for="direction">direction:</label>
  <select id="direction">
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
  </select>

  <label for="writingmode">writing-mode:</label>
  <select id="writingmode">
    <option value="horizontal-tb">horizontal-tb</option>
    <option value="vertical-lr">vertical-lr</option>
    <option value="vertical-rl">vertical-rl</option>
  </select>
</div>

<div id="wrapper" dir="ltr" style="direction: ltr">
  <div class="box physical">» 物理盒子 » »</div>
  <div class="box logic">» 逻辑盒子 » »</div>
</div>
:root {
  --bgcolor: #fff;
  --color: #333;
}

* {
  box-sizing: border-box;
}
body {
  background-color: var(--bgcolor);
  color: var(--color);
  margin:0;
  padding-top: 5em;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  min-height: 100vh;
}

/* Dark mode */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --color: #fff;
    --bgcolor: #101010;
  }
  a:link, a:visited {
    color: #0ff;
  }
}



/* Toggle */
/* https://adrianroselli.com/2019/08/under-engineered-toggles-too.html */

.controls {
  margin: 0;
  padding: .5em 2em 1em 2em;
  border-bottom: 1px solid #666;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bgcolor);
  color: var(--color)
}
.controls select {
  margin-right: 1.25rem;
  color: #2f4f4f;
  font-size: 1.2rem;
}

#wrapper {
  unicode-bidi: embed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100vw;
  
  &.column {
    flex-direction: column;
  }
}


.box {
  background-color: #f36;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3vh solid transparent;
  font-size: 2vw;
  
  &.physical {
    border-color: #890 #09f #2ef #dfa;
    padding: 6vh;
    width: 30vw;
    height: 40vh;
    margin: 3vh;
  }
  
  &.logic {
    background-color: #f43;
    border-inline-color: #dfa #09f;
    border-block-color: #890 #2ef;
    inline-size: 30vw;
    block-size: 40vh;
    padding-inline: 6vh 6vh;
    padding-block: 6vh 6vh;
    margin-inline:  3vh 3vh;
    margin-block: 3vh 3vh;
  }
  
}
View Compiled
const dirSelector = document.getElementById('dir');
const directionSelector = document.getElementById('direction');
const writingModeSelector = document.getElementById('writingmode');
const wrapper = document.getElementById('wrapper')

dirSelector.addEventListener('change', (e) => {
  console.log('====> dir:', e.target.value)
  wrapper.setAttribute('dir', e.target.value)
  wrapper.style.direction=e.target.value
  directionSelector.value = e.target.value
})

directionSelector.addEventListener('change', (e) => {
  console.log('====> direction:', e.target.value)
  wrapper.setAttribute('dir', e.target.value)
  wrapper.style.direction=e.target.value
  dirSelector.value =  e.target.value
})

writingModeSelector.addEventListener('change', (e) => {
  console.log('====> writing-mode:', e.target.value)
  wrapper.style.writingMode=e.target.value
  if (e.target.value === 'vertical-lr' || e.target.value === 'vertical-rl' ) {
    wrapper.classList.add('column')
  } else {
    wrapper.classList.remove('column')
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.