Beispiel:CSS-Writing-Mode.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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:SELFHTML-Beispiel-Grundlayout.css">
<title>Schreibrichtung mit writing-mode ändern</title>
<style>
article {
  padding: 1em;
  margin: 2em auto 0;
  width: 90%;
  max-width: 30em;
  display: flex;
	font-size: 1.25em;
}

article h2 {
  writing-mode: vertical-lr;
  font-family: 'Frijole', cursive;
	font-size: 2em;
}

.text-orientation {
  text-orientation: upright;
  letter-spacing:-.2em;
}

.hinweis { 
font-style:italic; 
border-bottom: thin solid #c32e04; 
border-left: thick solid #c32e04;
padding-left: .5em;
}
@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
</style> 
<script>
document.addEventListener('DOMContentLoaded', function () {

	document.addEventListener('click', changeTextOrientation);	
	const headingClasses = document.querySelector('article h2').classList;

	function changeTextOrientation() { 	
	  if (headingClasses.contains('text-orientation')) {
	    headingClasses.remove('text-orientation');
	  } else {
	    headingClasses.add('text-orientation');
  	}
	}

});
</script>
<body>
  <h1>Schreibrichtung mit writing-mode ändern</h1>


<article>
  <h2>Tradition</h2>
  <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.<br><br>
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>
</article>

<p class="hinweis">Klicken Sie in das Dokument, um die Ausrichtung der Buchstaben zu ändern!</p>
 
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Writing-Mode.html&oldid=81712“