如何在HTML中使文本反向？ [英] How do I make text reverse direction in HTML?

问题描述

我正在开发一个以愚蠢的limericks为主题的创意网站。我想要以交替的方向显示limerick的每一行。也就是说，我希望在 boustophedon表单中。我想知道是否可以用HTML。

I am working on a creative website featuring silly limericks. I would like to display each line of the limerick in an alternating direction. That is, I want it in boustophedon form. I was wondering if this was possible with just HTML.

作为一个例子，我想能够编写看起来像这样的标记：

As an example, I would like to be able to write markup that looks something like this:

<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

并在里面做苹果酒。

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，而不必做任何脚本动态操作文本。

For this example, I just manually wrote the text backwards, but I don't want to have to keep doing that since it's a very tedious process. It would be nice if I could do this in pure HTML, without having to do any scripting to dynamically manipulate the text.

推荐答案

是的，这是可能使用两个Unicode控制字符的组合。也就是说，

Yes, this is possible using the combination of two Unicode control characters. Namely, the

• '右到左超过'（U + 202E）


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

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

Each override character makes the text that follows it flow in the corresponding direction.

这些可以插入到HTML实体&＃x202E; 和&＃x202D; 或小数等值&＃8238; 和&＃8237; / code>。

These can be inserted into an document with the HTML entities ‮ and ‭, or the decimal equivalents, ‮ and ‭.

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

This allows you to write your example thus:

<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，所以你可以看到它的样子。

I'm posting this HTML in now so you can see how it appears. You can observe the actual direction change by selecting parts of the text.

曾经是一个年轻的女士，有自豪感， br>
&＃x202e;谁吃了14个绿色苹果，死了。

&＃x202d;在悲伤的地方，

&＃x202e;苹果发酵了

&＃x202d;在里面做苹果酒。

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.

如果你想要一个 true boustrephedon，字母形式也是向后，如果你不介意使用CSS3特性，那么你可以使用CSS3转换：

If you wanted a true boustrephedon, where the letters forms are also backwards, and if you don't mind using CSS3 features, then you could use a CSS3 transform:

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>

这篇关于如何在HTML中使文本反向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！