Атрибут writing-mode в CSS

9 червня 2022 р.363

Зміст

Встановлює направлення тексту на сторінці — по горизонталі або вертикалі.

id="field_css_info">Коротка інформація

Значення за замовчуванням	horizontal-tb
Успадковується	Так
Застосовується	До всіх елементів, за винятком осередків та рядків таблиці
Анімується	Ні

Синтаксис

<code>writing-mode: horizontal-tb | vertical-rl | vertical-lr

Позначення

	Опис	Приклад
<тип>	Вказує тип значення.	<розмір>
A && B	Значення повинні виводитися у зазначеному порядку.	<розмір> && <колір>
A \| B	Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).	normal \| small-caps
A \|\| B	Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.	width \|\| count
[ ]	Групує значення.	[ crop \|\| cross ]
*	Повторювати нуль або більше разів.	[,<час>]*
+	Повторювати один або більше разів.	<число>+
?	Вказаний тип, слово або група не є обов'язковим.	inset?
{A, B}	Повторювати не менше A, але не більше B разів.	<радіус>{1,4}
#	Повторювати один або більше разів через кому.	<час>#

Значення

horizontal-tb: Встановлює напрямок тексту по горизонталі зліва направо та зверху вниз.
vertical-rl: Задає напрямок тексту по вертикалі зверху вниз і праворуч наліво.
vertical-lr: Задає напрямок ня тексту по вертикалі зверху вниз і зліва направо.

-long field-label-above">

Пісочниця

Вінні-Пух

П'ятачок

Кролик

horizontal-tb vertical-rl vertical-lr

div { writing-mode: <span class="playground-active">{{ playgroundValue }}</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>writing-mode</title>
</head>
<body> <table> <tbody> <tr> <th>horizontal-tb</th> <th>vertical-rl</th> <th>vertical-lr</th>
</tr> <tr> <td><p style="writing-mode: horizontal-tb">Зразок тексту</p></td> <td><p style="writing-mode: vertical-rl">Зразок тексту</p></td> <td><p style="writing-mode: vertical-lr">Зразок тексту</p></td>
</tr>
</tbody>
</table>
</body>
</html>

Об'єктна модель

Об'єкт.style.writingMode

Примітка

Internet Explorer 6 підтримує нестандартні значення lr-tb та tb-rl, Internet Explorer 7 підтримує значення lr-tb, rl-tb, tb-rl, bt-rl .

Chrome до версії 48, Opera до версії 35, Safari та Android підтримують властивість -webkit-writing-mode.

Специфікація

Специфікація	Статус
CSS Writing Modes Level 3	Можлива рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери


6	12	8	48	15	35	5.1	11	41


3	76	41	37	5	11

Браузери

У таблиці браузерів застосовуються такі позначення.

— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, зазначених у специфікації.

Число вказує версію браузера, з якої властивість підтримується.

Текст і шрифт

Атрибут writing-mode в CSS

Синтаксис

Позначення

Значення

Пісочниця

Приклад

Об'єктна модель

Примітка

Специфікація

Специфікація

Браузери

Браузери

Див. також

Автор та редактори