同一HTML页面中的文本方向不同

时间:2014-06-02 12:01:52

标签: html multilingual

我有一个HTML页面,我想用英文显示一个段落,用阿拉伯语显示一个段落。问题是以文本为导向。我在HTML元素上设置参数dir ='rtl',但这使得英文文本以某种方式浮动,加上我输入的最后一个字符将显示为第一个。例如,写一下我想要的<p style='border-right: 1px solid black'>Ciao</p>

Ciao!                |

但我明白了:

                !Ciao|

关于如何达到预期效果的任何想法? 完整的标记示例:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir='rtl'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <p>
    نشجع كافة المعجبين على صفحة "سواروفسكي" على التوا
    </p>
    <p>Hello I am an English text!</p>
    </body>
</html>

3 个答案:

答案 0 :(得分:2)

您应根据每个元素内容的书写方向将dir attribute设置为值ltrrtl。因此,如果您在同一页面上有阿拉伯语和英语,则应将其设置为如下(假设页面的语言是阿拉伯语):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir='rtl'>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <p>
    نشجع كافة المعجبين على صفحة "سواروفسكي" على التوا
    </p>
    <p xml:lang="en" lang="en" dir='ltr'>Hello I am an English text!</p>
    </body>
</html>

关键区别在于包含英语的dir元素的p属性。语言属性与此无关,但设置与主语言不同的语言的每个段落的语言是合乎逻辑的良好做法。

dir属性并不总是必要的,因为字符的固有方向性负责为大部分内容编写方向。但是当方向设置为rtl时,默认对齐方式就在右侧,一种简单的方法是在需要时将方向设置为ltr。此外,如果方向设置不正确,一些标点符号和其他字符可能会进入错误的位置,因此最好设置它。

答案 1 :(得分:0)

请勿在html标记中使用 dir =&#39; rtl&#39; 。在标记中使用

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <p dir='rtl'>
    نشجع كافة المعجبين على صفحة "سواروفسكي" على التوا !
</p>
<p>Hello I am an English text !</p>
</body>

如果你想要显示彼此相反的英语和阿拉伯语段落,你必须使用表格。

答案 2 :(得分:-2)

首先,我建议使用CSS属性direction: ltr;来解决问题。从语义标记的角度来看,这绝对不是你想要的方式,就像@ JukkaK.Korpela指出的那样。因为我无法删除此接受的答案,所以我决定对其进行编辑:

设置包含英语的dir="ltr"元素的p属性(W3C specification)。一个好的做法是设置语言属性xml:lang="en"lang="en"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar" dir='rtl'>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
    <p>
    نشجع كافة المعجبين على صفحة "سواروفسكي" على التوا
    </p>
    <p dir="ltr" xml:lang="en" lang="en">Hello I am an English text!</p>
  </body>
</html>