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插入到文档中;和‭或十进制等价物‮和‭

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

<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>

原文链接：https://www.f2er.com/css/219243.html

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

解决方法

猜你在找的CSS相关文章