<div class="form-control">
<label for="writing-mode">toggle writing-mode</label>  <input type="checkbox" id="writing-mode" name="writing-mode">
</div>

<div class="example"></div>

.example {
  background-color: #4A90E2;
  block-size: 100px;
  inline-size: 200px;
}

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

.form-control {
  writing-mode: horizontal-tb;
  position: fixed;
  top: 8px;
  right: 16px;
  font-family: system-ui;
  font-size: 18px;
}

body {
  margin: 33px;
}
const checkbox = document.querySelector('#writing-mode');
const div = document.querySelector('div');

checkbox.addEventListener('click', function() {
  document.body.classList.toggle('vertical-writing-mode');
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.