反转文本 | CSS-Tricks

对于从右到左的语言，您可以在大多数浏览器中通过 dir 属性轻松地切换默认的从左到右的布局。

<body dir="rtl">
  text in right-to-left language
</body>

您可以在任何文本元素上使用该属性，它不必是 body。同样，您也可以用 CSS 切换它。

body {
  unicode-bidi:bidi-override;
  direction:rtl;
}

以下“不太实用”但仍然有趣

/* Flip each letter backwards */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  unicode-bidi:bidi-override;
  direction:rtl;
}

/* Entire text flipped around */
div {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
}

Zsitro

# 2012 年 1 月 5 日

不错的片段 :)

Ako Kaman

# 2012 年 1 月 5 日

不错的技巧。我很少看到关于从右到左语言的技巧。

Brendan Glyn-jones

# 2014 年 5 月 23 日

这正是我要找的，谢谢。我只有一个问题：如果一个盲人正在阅读你的视线，并且看到了这个，他们的设备会正确地读取文本还是会反过来读取？

Jwan

# 2017 年 10 月 25 日

这篇文章帮助我做到了！ https://codepen.io/Ciwan/pen/NaQWQa

非常感谢 :)

someone

# 2018 年 2 月 8 日

我做了这个来反转，它运行良好。

http://flipmytext.com/textreverser.html

Jyothika Reddy Palli

评论永久链接# 2023 年 2 月 6 日

你能提供你用来反转的资源或代码吗？我想反转书中的页面，用 html 和 css 可以做到吗？例如：从最后一页到第一页，因为我在 word 中可以做到，但需要花费很多时间，因为我需要对很多书进行操作。

anand

# 2019 年 7 月 22 日

我已经将 LTR 和 RTL css 分别放在不同的文件夹中，如何在 html 中根据阿拉伯语“ar”区域设置有条件地选择 css 文件夹？

Chris

# 2021 年 9 月 23 日

有什么方法可以在网页上水平翻转文本块中的一个字母吗？

john d

# 2022 年 12 月 15 日

感谢文章！
我想反转输入框的值，这种方式行不通，bdo 元素也不行，有什么想法吗？

评论

发表评论 取消回复

发表评论取消回复