Question

请检查此代码;我正在尝试根据语言更改字体和文本对齐：

风格

<style> 
  .quotebod { 
    padding: 10px 10px 10px 10px; 
    line-height: 22px; 
    font-size: 20px; 
  }

  :lang(ar) { 
    text-align:right; 
    font-family:'Droid Arabic Kufi'; 
  }

  .quotebod:lang(ar) { 
    padding: 10px 10px 10px 10px; 
    line-height: 30px; 
    font-size: 20px; 
    text-align:right; 
    font-family:'Droid Arabic Kufi'; 
  }</style>

<body><p class="quotebod">{Quote}</p></body>

** {Quote}：一个tumblr变量，但它的文字也是**

Answer 1

在同一页面中使用不同语言的文本非常好。通常在这种情况下，很容易确定主要的＆＃39; HTML的语言;该语言应在lang元素的<html>属性中使用。接下来，为包含用不同语言编写的文本的每个元素添加lang。

如果一种语言是LTR，而另一种语言是RTL，那么也可以按照相同的方法指定dir属性。例如：

<html lang="ar" dir="rtl">
  <head>
  </head>
  <body>
    <p>«فى هذا الكتاب مقارنة بين تعاليم الإسلام كما وصلت إلينا، وبين أصدق ما وصلت إليه حضارة الغرب فى أدب النفس والسلوك فى محاولة للكشف عن روعة التقارب وصدق التطابق»</p>
    <p lang="en" dir="ltr"> These are some of the words of the author, which cross them about the reason for writing this unique work</p> 
    <p>.. هذه بعض كلمات المؤلف التى عبر بها عن سبب كتابته لهذا العمل الفريد، خاصة بعد قراءته لكتاب «دع القلق وابدأ الحياة» لديل كارنيجى وقد اعتمد فى هذا العمل على جانبين رئيسين.</p>
  </body>
</html>

您可以使用:lang选择器轻松调整每个单独元素的样式。请注意，一旦在html上设置，它将被所有元素继承 - 除非直接覆盖。

因此，在上面的文档中，p:lang(ar)选择器将同时应用于第一段和第三段 - 但不会应用于第二段。

现在回答这个问题。我们假设我们的元素可能包含阿拉伯语或英语的文本。您可能已经猜到仅仅更改文本本身还不够 - 您还要相应地调整该元素的lang属性。例如：

// here goes the code that receives the quotation
<p class="quotebod" lang="{Quote.lang}" dir="{Quote.dir}">{Quote}</p>

困难的部分是通过引用来检测语言。我认为在源头上很容易做到，但你可以通过分析Quote的内容来做客户端 - 如果它们包含阿拉伯字母表中的符号，它们就是几乎没有英文 - 反之亦然。

例如，我们假设我们在浅层结构中包含不同类型的文本的HTML - 每个段落包含一个阿拉伯语或英语的文本块。以下是我们如何分配lang和dir属性的方法：

var arabicPatt = /[\u0600-\u06ff]/;
[].forEach.call(document.getElementsByTagName('p'), function(p) {
  var lang, dir;
  if (arabicPatt.test(p.textContent)) {
    lang = 'ar'; dir = 'rtl';
  }
  else {
    lang = 'en'; dir = 'ltr';
  }
  p.setAttribute('lang', lang);
  p.setAttribute('dir', dir);
});

Demo。请注意，我没有在CSS中设置text-align: right - 一旦元素收到相应的dir值，就会由浏览器完成。

根据语言CSS更改字体

1 个答案: