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

时间:2018-09-26 11:36:44

标签: html css asp.net

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

是否有任何方法可以最小化或集中化编码工作,以设计可支持LTR(英语)和RTL(阿拉伯语)两种语言的应用程序。 可以,我可以为两个方向分别编写CSS,但是在这些CSS之间进行切换的最佳方法是什么(例如,在母版页加载事件中)?

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

1 个答案:

答案 0 :(得分:1)

您可以定位<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)。