gpt4 book ai didi

html - 根据语言 CSS 更改字体

转载 作者:行者123 更新时间:2023-11-28 17:32:08 27 4
gpt4 key购买 nike

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

风格

<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 变量,但它也是文本 **

最佳答案

在同一页面中使用不同语言的文本是很好的。通常在这种情况下很容易确定 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 - 每个段落包含一个阿拉伯语或英语文本 block 。下面是我们如何分配 langdir相应的属性:

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 .请注意,我没有设置 text-align: right在 CSS 中——一旦元素收到相应的 dir,它就由浏览器完成值(value)。

关于html - 根据语言 CSS 更改字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25827756/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com