Напрямок тексту
Ми звикли читати текст зліва направо, для нас це здається звичайним і природним. У той же час існують мови, де потрібно писати справа наліво, наприклад, у арабському письмі. Також іноді виникають завдання, коли текст потрібно повернути, відобразити або якось інакше представити незвичайним чином. Google пожартував першого квітня та показав оборотну сторону свого пошуковика.
Завдяки CSS змінити напрямок тексту досить легко, і це робиться буквально кількома властивостями, тож можна експериментувати на здоров'я.
У прикладі 1 показані класи для зміни напрямку тексту.
Приклад 1. Варіанти зміни тексту
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.t1 { /*Справа наліво */
unicode-bidi: bidi-override;
direction: rtl;
}
.t2 {
transform: rotateY(180deg); /* Відображення по горизонталі */
}
.t3 {
transform: rotateX(180deg); /* Відображення по вертикалі */
}
.t4 { /* Поворот кожної букви */
transform: rotateY(180deg);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<p>Аліса в Дзеркалі</p>
<p class="t1">Аліса в Дзеркалі</p>
<p class="t2">Аліса в Дзеркалі</p>
<p class="t3">Аліса в Дзеркалі</p>
<p class="t4">Аліса в Дзеркалі</p>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Для відображення тексту справа наліво застосовуються дві властивості: unicode-bidi та direction. Ця комбінація потрібна для іноземних мов, наприклад, арабської, де текст читається саме справа наліво.
Інші варіанти в прикладі отримуються за допомогою трансформації, зокрема, повороту по осі X та Y. Замість повороту також можна використовувати функцію масштабування зі значенням -1. Варіанти нижче для текстового абзацу дають однаковий результат.
transform: rotateY(180deg);
transform: scaleX(-1);
Аналогічно працює і поворот навколо осі X, замість функції rotateX(180deg) можна написати scaleY(-1), і отримаємо однаковий результат.
Цікавий ефект можна отримати поєднуючи трансформацію та властивості для відображення тексту справа наліво (клас t4 у прикладі). Текст виводиться як зазвичай - зліва направо, але при цьому кожна буква в ньому повертається.
Чесно кажучи, поки не можу придумати, де і як на практиці використати подібні ефекти. Усе це виглядає забавно, може використовуватися як жарт, але практичної користі, на мій погляд, не має. А ви що думаєте з цього приводу?