Мы привыкли читать тексты слева направо, для нас это кажется привычным и естественным. Для нас кажется обычным то, что мы читаем текст слева направо, но такой язык как арабский, к примеру, меняет наше представление о привычном. Иногда также ставятся целенаправленные задачи, изменить текст в том или ином направлении.
Вот, шутник Гугл продемонстрировал такие навыки:
Пример 1. Вариант игры с текстом
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<span class="doctype"><!DOCTYPE HTML></span> <span class="tag"><<span class="keyword">html</span>></span> <span class="tag"><<span class="keyword">head</span>></span> <span class="tag"><<span class="keyword">meta</span><span class="attribute"> charset=<span class="value">"utf-8"</span></span>></span> <span class="tag"><<span class="keyword">title</span>></span>Текст<span class="tag"></<span class="keyword">title</span>></span> <span class="tag"><<span class="keyword">style</span>></span><span class="css"> <span class="class">.t1</span> <span class="rules">{ <span class="comment">/*Справа налево */</span> <span class="rule"><span class="keyword">unicode-bidi</span>:<span class="value"> bidi-override</span>;</span> <span class="rule"><span class="keyword">direction</span>:<span class="value"> rtl</span>;</span> }</span> <span class="class">.t2</span> <span class="rules">{ <span class="rule">transform:<span class="value"> <span class="function">rotateY(<span class="params"><span class="number">180</span>deg</span>)</span></span>;</span> <span class="comment">/* Отражение по горизонтали */</span> }</span> <span class="class">.t3</span> <span class="rules">{ <span class="rule">transform:<span class="value"> <span class="function">rotateX(<span class="params"><span class="number">180</span>deg</span>)</span></span>;</span> <span class="comment">/* Отражение по вертикали */</span> }</span> <span class="class">.t4</span> <span class="rules">{ <span class="comment">/* Поворот каждой буквы */</span> <span class="rule">transform:<span class="value"> <span class="function">rotateY(<span class="params"><span class="number">180</span>deg</span>)</span></span>;</span> <span class="rule"><span class="keyword">unicode-bidi</span>:<span class="value"> bidi-override</span>;</span> <span class="rule"><span class="keyword">direction</span>:<span class="value"> rtl</span>;</span> }</span> </span><span class="tag"></<span class="keyword">style</span>></span> <span class="tag"></<span class="keyword">head</span>></span> <span class="tag"><<span class="keyword">body</span>></span> <span class="tag"><<span class="keyword">p</span>></span>Алиса в Зазеркалье<span class="tag"></<span class="keyword">p</span>></span> <span class="tag"><<span class="keyword">p</span><span class="attribute"> class=<span class="value">"t1"</span></span>></span>Алиса в Зазеркалье<span class="tag"></<span class="keyword">p</span>></span> <span class="tag"><<span class="keyword">p</span><span class="attribute"> class=<span class="value">"t2"</span></span>></span>Алиса в Зазеркалье<span class="tag"></<span class="keyword">p</span>></span> <span class="tag"><<span class="keyword">p</span><span class="attribute"> class=<span class="value">"t3"</span></span>></span>Алиса в Зазеркалье<span class="tag"></<span class="keyword">p</span>></span> <span class="tag"><<span class="keyword">p</span><span class="attribute"> class=<span class="value">"t4"</span></span>></span>Алиса в Зазеркалье<span class="tag"></<span class="keyword">p</span>></span> <span class="tag"></<span class="keyword">body</span>></span> <span class="tag"></<span class="keyword">html</span>></span> |
Чтобы отображать текст «задом наперед», используются такие задачи: unicode-bidi и direction. Эти свойства необходимы для языков, где считается нормальным чтение наоборот.
Во всех остальных случаях, можно использовать трансформацию, то есть поворот по оси.
На итоге может получится забавная картина, при сочетании трансформации и прием отображения справа налево (например t4). При вводе обычного текста, буквы сами поворачиваются.
Это совершенно непрактично для восприятия и тем более чтения. Но, возможно, этот прием имеет место быть для какой-либо забавы или креативной концепции.
.