Beispiel:Writing-Mode.html
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Schreibrichtung mit writing-mode ändern</title> <style> @import '/skins/Selfhtml/fonts/fonts.css';
article { margin: 2em 1em 0 4em;
max-width: 30em;
display: flex; align-items: start; gap: 1em; font-size: 1.2em; }
article h2 { margin: 1rem 0 0; font: bold 2.3rem 'Oswald', cursive; flex: 0 0 4rem; }
.sideways-lr { writing-mode: sideways-lr; }
.sideways-rl { writing-mode: sideways-rl; }
.upright { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -.5em; }
footer {
border-top: thin double #800;
} footer ul {
list-style: none; padding: 0; display: flex; justify-content: start; gap: 1em; user-select: none;
} footer label {
border: thin solid #060; border-radius: 0.5em; padding: 0.2em 0.3em 0.3em 0;
}
.hinweis {
font-style:italic; border-bottom: thin solid #c32e04; border-left: thick solid #c32e04; padding-left: .5em;
} </style> <script> document.addEventListener('DOMContentLoaded', function () { const heading = document.querySelector('article h2'); document.querySelector("footer ul").addEventListener('change', function (event) { if (event.target.name == 'orient') { heading.className = event.target.value } }); }); </script> <body>
Schreibrichtung und Textausrichtung mit writing-mode
<article>
Tradition
<section>
Die Schreibrichtung war keineswegs immer so selbstverständlich wie heute. Die frühen Griechen verwendeten zunächst unter anderem die links- und rechtsläufige sowie die bustrophedone Schreibweise. Bei dieser wechselte die Schreibrichtung von Zeile zu Zeile – „wie der Ochse pflügt“.
Beim Bustrophedon wechselte mit der Schreibrichtung oft auch die Ausrichtung der einzelnen Buchstaben von Zeile zu Zeile. In der Folge haben sich Form und Ausrichtung vieler Buchstaben – etwa M und A – so entwickelt, dass sie in beiden Richtungen ähnlich erscheinen.
Spätestens im 4. Jahrhundert v. Chr. setzte sich im griechischen Raum die rechtsläufige Schreibweise durch, wie sie bis heute in Europa verwendet wird.
<footer>
Wähle eine Darstellungsform der Überschrift:
- <label><input type="radio" name="orient" value="sideways-lr"> Seitwärts von links nach rechts</label>
- <label><input type="radio" name="orient" value="sideways-rl" checked> Seitwärts von rechts nach links</label>
- <label><input type="radio" name="orient" value="upright"> Zeichen aufrecht</label>
</footer> </section> </article> </body> </html>
