Варіанти вертикального напрямку тексту CSS

Текст зверху вниз з поворотом символів за годинниковою стрілкою


приклад

Текст знизу вгору з поворотом символів проти годинникової стрілки


приклад

Вертикальні заголовки HTML-таблиці


  Показник    СіченьЛютийБерезень
▶ Переглянути весь код
Квітень
Травень
Червень
Липень
Серпень
Вересень
Жовтень
Листопад
Грудень Рік Абсолютний максимум, °C 5,2 6,8 16,5 31,1 32,6 39,5 43,9 40,4 34,0 26,0 14,7 8,2 43,9 Середня температура, °C −9,9 −9,6 −3,4 7,0 16,9 19,7 23,5 19,4 13,4 6,0 −2,4 −8,2 5,7 Абсолютний мінімум, °C −43 −36,9 −31,4 −20,9 −4,9 −0,4 8,1 3,5 −3,4 −15,7 −28,1 −41,3 −43,3
Клімат Самари

writing-mode

вміст елемента (саме елемент не повертається!) розташовується horizontal-tb initial horizontal-tb inherit успадковує значення батька unset успадковує значення батька


Перший рядок    Другий рядок  
 Осередок 1_1 Осередок 1_2 Осередок 2_1 Осередок 2_2

sideways-rl і  sideways-lr без реалізації Google Chrome вже більше 7 років. -->

Важливо: спеціально для writing-mode були розроблені такі властивості, як inline-size, block-size, padding-inline-start, margin-block-start, border-block-end і т.п.

Текст зверху вниз без символів.


приклад

text-orientation

mixed кожен символ повернуть на 90° за годинниковою стрілкою upright кожен символ як у direction: ltr; writing-mode: horizontal-tb; sideways рядок з символами повернута на 90° за годинниковою стрілкою initial mixed inherit успадковує значення батька unset успадковує значення батька


Перший рядок    Другий рядок  
 Осередок 1_1 Осередок 1_2 Осередок 2_1 Осередок 2_2

Об'єднати кілька символів у просторі одного символу


Осьприклад10


Осьприклад10

text-combine-upright

none простір одного символу займає один символ all простір одного символу ділять на рівні частини всі заявлені символи та відображаються горизонтально digits простір одного символу ділять на рівні частини два символи та відображаються горизонтально initial none inherit успадковує значення батька unset успадковує значення батька


Перший рядок    Другий рядок  
 Осередок  1_1 Осередок  1_2 Осередок  2_1 Осередок  2_2

Рядок у зворотному порядку

Для того, щоб перевернути рядок у зворотному напрямку нам знадобиться:

Перетворимо рядок на масив за допомогою методу split('') , передавши як аргумент порожній рядок, щоб кожен символ рядка був окремим елементом масиву.
Далі використовуємо метод reverse(), який змінює порядок елементів масиву у зворотному напрямку.
І останньою дією збираємо з масиву рядок за допомогою методу join('').

const str = 'рядок'; // Перетворимо рядок на масив const strToArr = str.split(''); // ['с', 'т', 'р', 'про', 'до', 'а'] // Розгортаємо елементи масиву strToArr.reverse(); // ['а', 'до', 'про', 'р', 'т', 'с'] // Перетворимо масив у рядок const newStr = strToArr.join(''); // акортс

Також цей спосіб можна записати в один рядок:

const str = 'рядок'; const newStr = str.split('').reverse().join(''); // акортс

Спосіб 2: Використання циклу for

У другому способі ми скористаємося циклом for і пройдемося по рядку починаючи з кінця, додаючи символи рядка до нового змінного.

function reverseString(str) < let reversed = ''; for (let i = str.length - 1; i >= 0; i--) < reversed += str[i]; >return reversed; > const newStr = reverseString('рядок'); // акортс

Спосіб 3: Використання рекурсії

Третій метод використовує рекурсію для поділу рядка на підрядок без першого символу та додавання цього символу в кінець розгорнутого підрядка.

function reverseString(str) < if (str === '') < return '' >return reverseString(str.substring(1)) + str[0]; > const newStr = reverseString('рядок'); // акортс

Читайте також

Створюємо повернутий текст із CSS властивістю “writing-mode”

У цій статті я покажу вам, як розмістити текст на веб-сторінці зверху вниз, замість ліворуч-праворуч (або праворуч-ліворуч). Є два способи, один кращий за інший, так що погнали!

Як використовувати CSS правило “writing-mode”

Спосіб №1: перетворення в CSS

Якщо ви знайомі з CSS, то можете подумати, що transform це найкращий спосіб вирішення цього питання, але дозвольте мені показати вам, чому він не ідеальний. Почнемо з якогось вмісту (заголовки і параграф), потім застосуємо transform разом з transform-origin таким чином воно повернеться щодо правильної точки, потім відступ, щоб воно не виходило за межі екрана.

Такий підхід працює для повороту тексту, але не впливає на положення в документі, тому у нас h2 заліз на вміст під ним. Хоча у нас вийшов прикольний абстрактний результат.

Спосіб №2: CSS writing-mode

Другий спосіб, що підтримує положення в документі, таким чином h2 залишиться справжніх розмірів, незалежно від напрямку тексту. Ми будемо використовувати властивість write-mode, наприклад:

writing-mode:
vertical-rl;

У цьому випадку, ми задаємо значення vertical-rl , що надає напрямок відображення на вертикальне та напрямок тексту праворуч-ліворуч.

Так набагато краще. Ще ви помітите, що курсор теж зміниться, чого не було під час перетворень CSS transform.

Block Flow Direction (напрямок положення блоку)

Ви, мабуть, помітили, що ми використовували значення rl (справа-ліворуч), хоча ми звикли читати ліворуч-праворуч. А це тому, що ми змінили напрямок положення блоку (Block Flow Direction). Якщо ми задамо значення h2 висоти, ви побачите, що текст згрупується і ви зрозумієте, що в даному випадку, дійсно потрібно, щоб рядки розташовувалися від правої сторони сторінки до лівої:

Це підводить нас до того, що нам необхідно визначити, які з цих вирівнювань і в яких напрямках мають піти. Написане латинськими літерами піде згори до низу (це і є Block Flow Direction). Текст читається зліва-направо (і це Inline Flow Direction). І базова лінія вирівнювання символів по нижньому краю, хоча спрямована нагору (це Character Direction). Ось так:

Інші написання, на зразок арабського, на основі Хан (китайською та японською) або монгольське, можуть відображати текст, використовуючи ці три положення в будь-якій комбінації напрямків.

Написання та режим письма (Writing Mode)

Режим листа розроблений для підтримки всіх у світі варіантів написання та систем листа. Ми згадали монгольську систему, наприклад, всі вони відображаються вертикально, але розташовуються ліворуч-праворуч.

Інші варіанти writing-mode, які можна використовувати вже сьогодні, включають:

vertical-lr — коли текст розташовується вертикально, але йде зліва контейнера направо.
horizontal-tb - коли текст залишається горизонтальним, але розміщується зверху донизу. Це (ви помітили) напрямок за замовчуванням.

Напрямок тексту

Ось ще на що варто поглянути: китайська поема, використано режим vertical-rl. Вміст спрямований праворуч, тому ви починаєте читати з права сторінки і читаєте в лівому напрямку.Але, що ви ще, мабуть, помітили — символи таки спрямовані нагору. Латинські символи з тими самими правилами були б спрямовані по-іншому. Це зроблено спеціально:

"Стандарт Unicode присвоює властивість кожному символу, і браузери можуть використовувати його для визначення стандартної орієнтації для даного символу". - W3C

Далі можна підганяти орієнтацію символів, використовуючи властивість text-orientation .

Висновок

На момент написання браузери чудово підтримують режим написання CSS, хоча він все ще в розробці. Все, що ви бачили, я робив у цьому уроці, вже можна використовувати для робочого сайту.

Не важливо, чи ви використовуєте це в практичних або естетичних цілях, давайте подивимося на те, як ви це використовуєте в коментарях!

Як перевернути рядок у CSS