Beispiel:CSS-Writing-Mode-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="ja"> <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>Ruby + Vertikale Texte</title> <style> 

 body {
   font-size: 1.5em;
   background: grey;

.wrapper { display: flex; 

   gap: 2em;
   padding: 1em;
 }

 /* Grundlayout */
 .vertical {
   writing-mode: vertical-rl;
   border: medium solid #333;
   padding: 1em;
   width: 5em;
   background: white;
   line-height: 1.8;
 }

 /* Ruby Darstellung verbessern */
 ruby {
   ruby-position: over; /* in vertical-rl bedeutet "rechts" */
 }

 /* Varianten für text-orientation */
 .mixed {
   text-orientation: mixed;
 }

 .upright {
   text-orientation: upright;
 }

 .sideways {
   text-orientation: sideways;
 }

 strong {
   font-size: 1rem;
   display: block;
   margin-bottom: 1em;
 }

</style> </head> <body>

Ruby + Vertikale Texte

 mixed (Standard)
 
   漢 かん
 
 
   字 じ
 
 と
 
   ルビー ruby
 
 の例

 upright
 
   情 じょう
 
 
   報 ほう
 
 技術

 sideways
 
   本 ほん
 
 
   文 ぶん
 
 ABC123

</body> </html>

Abgerufen am 24.12.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Writing-Mode-2.html"