Question

我正在创建一个以愚蠢的打油诗为特色的创意网站。我想以交替的方向显示打油诗的每一行。也就是说，我希望它在boustophedon form中。我想知道这是否可能只用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做到这一点会很好，而不必动画操作文本。

Answer 1

是的，这可以使用两个Unicode控制字符的组合。即，

'RIGHT-TO-LEFT OVERRIDE'（U + 202E）
'LEFT-to-RIGHT OVERRIDE'（U + 202D）

每个覆盖字符使其后面的文本以相应的方向流动。

这些可以插入包含HTML实体‮和‭的文档，或等效小数，‮和‭。

这允许你这样编写你的例子：

<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，因此您可以看到它的显示方式。您可以通过选择部分文本来观察实际的方向变化。

    曾经有一位骄傲的年轻女士，
    谁吃了十四个绿色的123苹果而死了     在悲叹内，
    苹果发酵了     并在她的内部制作苹果酒。

如果您想要一个 true 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>

Answer 2

试试这个 - http://jsfiddle.net/Mbr2f/

span {
    direction: rtl;
    unicode-bidi: bidi-override;
}

Answer 3

您可以使用 bdo 标记，如下所示：

bdo[dir='rtl'] {
  color: red;
}

There once was a lady with pride,<br>
<bdo dir='rtl'>who ate fourteen green apples and died.</bdo><br> 
Within the lamented,<br>
<bdo dir='rtl'>the apple fermented</bdo><br> 
and made cider inside her insides.

如何在HTML中创建文本反向？

3 个答案: