css - 如何在 HTML 中使文本反向？

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>

会显示这样的东西

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 中执行此操作，而无需执行任何脚本来动态操作文本，那就太好了。

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 发布到其中，这样您就可以看到它的显示效果。您可以通过选择部分文本来观察实际的方向变化。

There once was a young lady with pride,
‮who ate fourteen green 123 apples and died.
‭Within the lamented,
‮the apple fermented
‭and made cider inside her insides.

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