17 тыс подписчиков
Ставим текст вертикально — забытое свойство text-orientation
Сложно сказать, зачем оно может пригодиться вам на практике. Но предположим, вы решили вернуть свой старый бизнес из девяностых и добыли такой HTML:
<div class="container">
<p class="mixed">ремонт</p>
<p class="mixed">обуви👠</p>
<p class="mixed">копиR🔑</p>
<p class="mixed">ключей</p>
</div>
Тогда чтобы поставить текст вертикально, нужно сначала установить writing-mode в vertical-rl или vertical-lr. А дальше добавляем text-orientation.
Значение upright поставит буквы вертикально как есть, а mixed перевернёт их на 90 градусов.
Кстати, эмодзи таким способом не переворачиваются, для них сработает transform: rotate(90deg);
Около минуты
20 ноября 2023