<div class="controls"> 

  <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">
  <img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/cat-632x475.jpg" alt="一只灰色的猫" />
</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;
  }
}

img {
  inline-size: 300px;
  block-size: auto;
}

const writingModeSelector = document.getElementById('writingmode');
const wrapper = document.getElementById('wrapper')

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')
  }
})