阿拉伯语网站的CSS要点总结

| 12 条评论 | 33,880 人已阅
本站所有文章均为博主人工写作，绝无AI辅助成分，请放心参阅。

阿拉伯语不同于其他文字，是从右向左读的，文字要向右对齐，在CSS中右对齐的属性有两条：

1
2

text-align:right;
direction: rtl;

text-align很常见，也就是简单的右对齐属性。direction就不那么常见了。
CSS手册中对direction属性是这样描述的：该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。
也就是说定义了direction:rtl的元素，文字的书写方向是从右至左。另外direction还有控制text-align默认值的作用，定义过direction:rtl的元素，如果没有预先定义过text-align，那么这个元素的text-align的值就变成了“right”

可以比较这样的代码：

1
2

<div style="direction: rtl;">1 2 3 4 5 6</div>
<div style="text-align:right;">1 2 3 4 5 6</div>

效果如下

1 2 3 4 5 6
1 2 3 4 5 6

对于数字和标点符号以外的编码，顺序仍然是从左到右的：

1
2
3
4
5
6

<div style="direction: rtl;">This is my blog.</div>
<div style="text-align:right;">This is my blog.</div>
<div style="direction: rtl;">这是我的博客。</div>
<div style="text-align:right;">这是我的博客。</div>
<div style="direction: rtl;">هذا هو بلدي بلوق.</div>
<div style="text-align:right;">هذا هو بلدي بلوق.</div>

效果如下，只有标点在rtl的时候到左侧去了

This is my blog.
This is my blog.
这是我的博客。
这是我的博客。
هذا هو بلدي بلوق.
هذا هو بلدي بلوق.

阿拉伯语的标点在左侧，正是我们需要的效果。

你可能还听说过的一条CSS：unicode-bidi:bidi-override

1
2
3

<div style="direction: rtl; unicode-bidi:bidi-override">This is my blog.</div>
<div style="direction: rtl; unicode-bidi:bidi-override">这是我的博客。</div>
<div style="direction: rtl; unicode-bidi:bidi-override">هذا هو بلدي بلوق.</div>
This is my blog.
这是我的博客。
هذا هو بلدي بلوق.

所有的字符都倒过来了，中文看起来不错，英文就完全看不懂了，而阿拉伯文和英文混排的场合还是比较多的，这样做显然过头了。

可见如果要实现自右向左的阅读顺序，用到direction:rtl 就够了。direction属性是可继承的，所以常见的做法是给html元素增加一条属性，就能覆盖全局了。

1

html {direction: rtl;}

这样也可以：

1

<html dir="rtl">

对于双语网站，有时候为了排版需要，我们会对一些文字块做text-align:left的处理，这个时候切换到阿拉伯文，虽然文字的阅读顺序还是右至左，但这些文字块的对齐却是靠左的，所以还是需要对它们设置text-align:right

有时候过于依赖浮动的排版，切换到阿拉伯语也会发生让人头疼的问题。比如表单，正常情况下我喜欢把lable固定宽度左浮动，input也左浮动。但阿拉伯语的用户浏览习惯中，lable是要放在右侧的，设置了左浮动的lable即使内部文字顺序是从右开始的，lable本身还是在左侧的：

1
2
3
4

<label for="user_name" style="float:left; width:200px">إسم المستخدم:</label>
<input id="user_name" type="text" name="user_name" style="float:left"><br>
<label for="user_password" style="float:left; width:200px">كلمة السر:</label>
<input id="user_password" type="password" name="password" style="float:left">

阿拉伯人表示用不来这样的表单…
blog_18_1

应该利用display:inline-block进行顺序布局，

1
2
3
4

<label for="user_name" style="display:inline-block; width:200px">إسم المستخدم:</label>
<input id="user_name" type="text" name="user_name" style="display:inline-block"><br>
<label for="user_password" style="display:inline-block; width:200px">كلمة السر:</label>
<input id="user_password" type="password" name="password" style="display:inline-block">

这样才能配合全局的direction得到想要的效果：
blog_18_2

最后一点，我们常用的网页正文字体大小，中英文是12px-14px，而这个字体大小对于阿拉伯文字来说就太小了，一般阿拉伯文要设置16px以上才才方便阅读，最常见的是18px：

12px – العربية Arabic 阿拉伯语
14px – العربية Arabic 阿拉伯语
16px – العربية Arabic 阿拉伯语
18px – العربية Arabic 阿拉伯语

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/453.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

12 关于 “阿拉伯语网站的CSS要点总结” 的评论

    1. Brain 文章作者

      原则上都是从右到左，所以如果做按钮的话，把按钮写成display:inline-block 这样的行内元素就能继承到rtl了

      回复 ↓
      1. 半壁自成空

        啊泪奔啊。文字的我明白了。布局的还有点不明白。比如我此时留言的功能吧。
        留言这块的布局是 上面是textare 下左是选择表情 下右是发布按钮。那么我加了rtl之后，此时在网页上该是显示
        上面不变，下左是发布按钮，下右是选择表情。这样的布局符合阿拉伯人的习惯吗。谢谢抽空解答。

        回复 ↓
        1. Brain 文章作者

          发布按钮就最好放到左侧了，如果布局比较特别，就得不厌其烦的用别的方法实现，rtl只是一种简单的实现方式。整个阿拉伯网站的CSS还要另外写一堆样式定制的

          回复 ↓
          1. 半壁自成空

            刚刚有看了几个阿拉伯网站。发现他们的翻页或者其他出现【上一页】和我们的也是相反。
            比如说当前是第3页,点 < 的时候，我们应该是跳转到2 ，他们却是4。。。

  3. 沫沫小青

    你好，r 1; 2 3 4’的显示结果为：’r 1; 2 3 4请问为什么只有句末的标点符号才遵循右—>左的顺序？理解无能啊。。。

    回复 ↓
    1. Brain 文章作者

      因为除了标点符号可以被认作阿拉伯语之外，其他字符都不是阿拉伯文字。rtl是专为支持右向左的文字制定的，不要在非右向左语系的段落内用rtl属性

      回复 ↓
  5. 蝎子莱莱

    请问一下，如果说多语言进行切换，怎样才能判断当前页面用户选择的是哪种语言从而给需要改变样式的标签不同的class呢

    回复 ↓
    1. Brain 文章作者

      要看你用了什么CMS了，如果是WordPress+WPML，可以看下这个https://blog.brain1981.com/1030.html
      如果是其他系统或者其他插件，要翻一下开发文档的

      回复 ↓

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注