Beispiel:CSS-Writing-Mode-Vergleich.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vergleich der writing-mode Werte</title>
<style>
main {
margin-block-start: 2em;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2em 0.5em;
place-items: center;
}
main > p {
position: relative;
padding: 0.5em;
margin: 0;
border: thin solid red;
block-size: 4em;
inline-size: 12em;
}
main > p::before {
position: absolute;
writing-mode: horizontal-tb;
font-size: 90%;
inset-block-start: -1.5em;
block-size: 2em;
inline-size: fit-content;
}
main > p:nth-of-type(1) { grid-area: 1/1/2/5; writing-mode: horizontal-tb; }
main > p:nth-of-type(1)::before { content: 'horizontal-tb'; }
main > p:nth-of-type(2) { grid-area: 2/1/3/2; writing-mode: vertical-rl; }
main > p:nth-of-type(2)::before { content: 'vertical-rl'; }
main > p:nth-of-type(3) { grid-area: 2/2/3/3; writing-mode: vertical-lr; }
main > p:nth-of-type(3)::before { content: 'vertical-lr'; }
main > p:nth-of-type(4) { grid-area: 2/3/3/4; writing-mode: sideways-rl; }
main > p:nth-of-type(4)::before { content: 'sideways-rl'; }
main > p:nth-of-type(5) { grid-area: 2/4/3/5; writing-mode: sideways-lr; }
main > p:nth-of-type(5)::before { content: 'sideways-lr'; }
</style>
<body>
<main>
<p>你好世界 = Hallo Welt<br>新线 = Neue Zeile</p>
<p>你好世界 = Hallo Welt<br>新线 = Neue Zeile</p>
<p>你好世界 = Hallo Welt<br>新线 = Neue Zeile</p>
<p>你好世界 = Hallo Welt<br>新线 = Neue Zeile</p>
<p>你好世界 = Hallo Welt<br>新线 = Neue Zeile</p>
</main>
</body>
</html>
