Как сделать текстовое обратное направление в HTML?

Я работаю над творческим сайтом с участием глупых лимериков. Я хотел бы отобразить каждую линию лимерика в переменном направлении. То есть, я хочу его в форме boustophedon. Мне было интересно, возможно ли это с помощью только HTML.

В качестве примера я хотел бы иметь возможность писать разметку, которая выглядит примерно так:

<p>
  <forward>There once was a young lady with pride,<br>
  <backward>who ate fourteen green apples and died.<br>
  <forward>Within the lamented,<br>
  <backward>the apple fermented<br>
  <forward>and made cider inside her insides.
</p>

который отобразит что-то вроде этого

Когда-то была юная леди с гордостью,
.deid dna selppa neerg neetruof eta ohw
В скорбь,
detnemref elppa eht
и сделал сидр внутри ее внутренности.

В этом примере я просто вручную написал текст назад, но я не хочу продолжать делать это, потому что это очень утомительный процесс. Было бы неплохо, если бы я мог сделать это в чистом HTML, не требуя каких-либо скриптов для динамического манипулирования текстом.

Ответы

Ответ 1

Да, это возможно, используя комбинацию двух символов управления Unicode. А именно,

  • "ПРАВИЛЬНО-ЛЕВЫЙ ОТВЕРЖДЕНИЕ" (U + 202E)
  • "ВЕРНУТЬСЯ НА ПРАВО" (U + 202D)

Каждый символ переопределения делает текст, следующий за ним, течет в соответствующем направлении.

Они могут быть вставлены в документ с объектами HTML &#x202E; и &#x202D; или десятичными эквивалентами &#8238; и &#8237;.

Это позволяет вам написать свой пример таким образом:

<p>
  There once was a young lady with pride,<br>
  &#x202e;who ate fourteen green apples and died.<br>
  &#x202d;Within the lamented,<br>
  &#x202e;the apple fermented<br>
  &#x202d;and made cider inside her insides.
</p>

Теперь я отправляю этот HTML-код, чтобы вы могли видеть, как он выглядит. Вы можете наблюдать фактическое изменение направления, выбирая части текста.

  Когда-то была юная леди с гордостью,
‮who ate fourteen green apples and died.
‭Within the lamented,
‮the apple fermented
‭and made cider inside her insides.

Если вам нужен настоящий boustrephedon, где формы букв также обратные, и если вы не против использования функций CSS3, вы можете использовать преобразование CSS3:

backward { 
     display: inline-block;
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1);  
    transform: scale(-1, 1); 
} 
<p>
  There once was a lady with pride,<br>
  <backward>who ate fourteen green apples and died.</backward><br>
  Within the lamented,<br>
  <backward>the apple fermented</backward><br>
  and made cider inside her insides.
</p>