Beispiel:CSS-Writing-Mode.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">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<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>
<h1>Schreibrichtung mit writing-mode ändern</h1>
<article>
<h2 class="sideways-rl">Tradition</h2>
<section>
<p> Die frühen Griechen (ca. 800 bis 600 v. Chr.) handhabten die Schreibrichtung zunächst
noch variabel. Es existierten linksläufige, rechtsläufige und die <b>bustrophedone</b>
(„wie der Ochse pflügt“) Schreibweisen. 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.
</p>
<p> 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.
</p>
<footer>
<p>Wählen Sie eine Darstellungsform der Überschrift:</p>
<ul>
<li><label><input type="radio" name="orient" value="sideways-lr"> Seitwärts L-R</label></li>
<li><label><input type="radio" name="orient" value="sideways-rl" checked> Seitwärts R-L</label></li>
<li><label><input type="radio" name="orient" value="upright"> Aufrecht</label></li>
</ul>
</footer>
</section>
</article>
</body>
</html>
