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