时间戳

首页 > 解决方案 > 根据 rtl 或 ltr 语言自动设置方向和文本对齐

html - 根据 rtl 或 ltr 语言自动设置方向和文本对齐

问题描述

我们可以设置标签的direction属性body来指示rtl方向ltr。同样，我们可以text-align为单个元素设置属性。

有没有办法最小化或集中编码工作来设计一个可以同时支持LTR（英语）和RTL（阿拉伯语）语言的应用程序。没关系，我可以为两个方向编写单独的 css，但是在这些 css 之间切换的最佳方法是什么（例如，在母版页加载事件中）？

还有一个例外情况，例如在英语中，我需要将网格的第一列显示为text-align:left（它包含文本），但其余列应显示为text-align:left，因为该列包含数值。同样，阿拉伯语的情况将相反。

标签： htmlcssasp.net

解决方案

<body>您可以将方向设置为特定值的元素作为目标，如下所示：

body span { text-align: left } /* default value */
body[direction="rtl"] span { text-align: right } /* override for rtl languages */

但是，如果您有很多使用 text-align 的元素，这可能会令人厌烦。也许您可以创建一个text-align使用相同方法的类：

.aligned { text-align: left }
body[direction="rtl"] .aligned { text-align: right }

最后，对于更复杂的情况，您可能会发现RTLCSS很有用：

RTLCSS 是一个用于将左到右 (LTR) 级联样式表 (CSS) 转换为从右到左 (RTL) 的框架。

推荐阅读