css – 如何使HTML中的文本反向?

我在一个创意网站上工作,愚蠢的人物。我想以一个交替的方向显示limerick的每一行。也就是说,我想要在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>

这将显示这样的东西

There once was a young lady with pride,
.deid dna selppa neerg neetruof eta ohw
Within the lamented,
detnemref elppa eht
and made cider inside her insides.

对于这个例子,我只是手动向后写文本,但我不想继续这样做,因为这是一个非常繁琐的过程。如果我可以在纯HTML中执行此操作,那么这将是很好的,而无需执行任何脚本来动态地处理文本。

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

>右上角(U 202E)
>“左转”(U 202D)

每个覆盖字符使得它之后的文本沿着相应的方向流动。

这些可以用HTML实体&#x202E插入到文档中;和&#x202D;或十进制等价物&#8238;和‭

这样你可以写出你的例子:

<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,所以你可以看到它的出现。您可以通过选择文本的部分来观察实际的方向变化。

There once was a young lady with pride,
‮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>
http://stackoverflow.com/questions/12179941/how-do-i-make-text-reverse-direction-in-html

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – 如何使HTML中的文本反向?