Tekst verticaal weergeven
writing-mode: vertical-rl;
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Verticale tekst met gebruik van writing-mode: vertical-rl;. Alleen de richting van de tekst wordt veranderd, de <div> blijft precies hetzelfde.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
transform: rotate(90deg);
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Verticale tekst met behulp van transform: rotate(90deg);. De <div> wordt gedraaid, maar houdt z'n originele ruimte bezet en wordt over (of onder) andere elementen gezet. De tekst in de <div> verandert niet van positie.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, adipiscing elit. Donec adipiscing quam non elit. Curabitur suscipit, lacus nec interdum sodales, nisl justo sodales risus, in porta metus felis sapien. Nulla facilisi.
