<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');
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.