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

Question

我正在创建一个充满愚蠢的打油诗的创意网站.我想以交替的方向显示打油诗的每一行.也就是说,我希望它以圆形形式出现.我想知道这是否可能只用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控制字符的组合.即,

• '左右覆盖'(U + 202E)
• '左右覆盖'(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苹果并且死了.
在感叹中,
苹果
在她的内部发酵并制成苹果酒.

如果你想要一个真正的 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;
}