管理LTR和RTL的CSS方向

Question

管理LTR和RTL的CSS方向

7

这里是CSS/HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}
.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}
.containerMeeting {
    margin-bottom: 5mm;
}
.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.borderHEADINGOuter {
    border-bottom: 1px gray solid;
    margin-bottom: 5mm;
}
.borderHEADINGInner {
    border-bottom: 4px gray solid;
    margin-bottom: 2px;
}
.tableHEADING {
    width: 100%;
    border: none;
}
.tableHEADING td {
    border: none;
}
.textCongregation {
    vertical-align: bottom;
    text-align: left;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}
.textTitle {
    vertical-align: bottom;
    text-align: right;
    font-size: 18pt;
    font-weight: 700;
}
</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div class="borderHEADINGOuter">
            <div class="borderHEADINGInner">
                <table class="tableHEADING">
                    <colgroup>
                        <col width="50%" /><col width="50%" />
                    </colgroup>
                    <tr>
                        <td class="textCongregation">CONGREGATION NAME</td>
                        <td class="textTitle">Midweek Meeting Schedule</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

</html>

这是摇晃效果： https://jsfiddle.net/mL9j6zgz/ 一切正常。但是，如果我将属性更改为并且属性更改为，布局就不正确了。两个

对象正确交换，但文本对齐现在是错误的。它们需要被反转。

我知道我可以为RTL创建两个新的CSS类，并使用相反的文本对齐方式，但浏览器有没有办法处理这个问题？我认为它会交换对齐方式。我讲得通吗？

用中文解释：这段文字提到一个问题，当将属性设置为和属性设置为时，布局出现了问题，需要翻转文本对齐方式。作者想知道是否有一种浏览器可以自动处理这个问题的方法。

<CONGREGATION NAME                     MIDWEEK MEETING SCHEDULE>

用阿拉伯文:

<MIDWEEK MEETING SCHEDULE                     CONGREGATION NAME>

阿拉伯语 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="rtl" lang="ar" xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="unsaved:///Workbook-S-140.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME Midweek Meeting Schedule</title>
<style type="text/css">
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
table th, td {
    /* Comment out the following line if you do not want borders */
    border: 1px #d3d3d3 solid;
/* This is the default font for all cells */font-family: Calibri;
}
body {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}
.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}
.containerMeeting {
    margin-bottom: 5mm;
}
.floatRight {
    color: gray;
    padding-top: 1mm;
    padding-bottom: 1mm;
    padding-right: 2mm;
    float: right;
    text-align: right;
    font-size: 8pt;
    font-weight: 700;
    text-transform: none;
}
.borderHEADINGOuter {
    border-bottom: 1px gray solid;
    margin-bottom: 5mm;
}
.borderHEADINGInner {
    border-bottom: 4px gray solid;
    margin-bottom: 2px;
}
.tableHEADING {
    width: 100%;
    border: none;
}
.tableHEADING td {
    border: none;
}
.textCongregation {
    vertical-align: bottom;
    text-align: left;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}
.textTitle {
    vertical-align: bottom;
    text-align: right;
    font-size: 18pt;
    font-weight: 700;
}
</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div class="borderHEADINGOuter">
            <div class="borderHEADINGInner">
                <table class="tableHEADING">
                    <colgroup>
                        <col width="50%" /><col width="50%" />
                    </colgroup>
                    <tr>
                        <td class="textCongregation">اسم الجماعة</td>
                        <td class="textTitle">برنامج اجتماع وسط الاسبوع</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

</html>

- Andrew Truckle

使用表格无法交换它。如果您将表格布局更改为div，您可以通过属性进行目标化，例如.textCongregation{ float:left; } [dir="rtl"] .textCongregation{float : right; }，从而使float:left和float:right互换位置。使用这段小代码，您将实现... - Marcos Pérez Gude

如果我想保留表格怎么办？我必须有两个专门的类，这些类的文本对齐属性是相反的吗？我的其余表格会自动将单元格文本从右到左交换等。 - Andrew Truckle

是的，文本方向没问题，问题在于HTML结构，你不能将一个td从它们的位置移动到另一个位置（交换tds），如果我理解你的问题正确，你需要这样做。 - Marcos Pérez Gude

将我的文档设置为RTL会自动以相反的顺序呈现单元格。交换单元格不是我想做的，而是颠倒文本对齐方式。 - Andrew Truckle

哦，好吧！我误解了你的问题。使用属性选择器很容易，我现在就写一个答案。 - Marcos Pérez Gude

2个回答

1

流相对的CSS属性和值的进展使这变得更加容易。

.textCongregation {
  text-align: start;
}

以下属性和值目前在现代浏览器中得到了很好的支持。括号中是旧的、常用的LTR术语。

插入块开始（取代左属性）

插入块结束（取代右属性）

内联起始边距（取代margin-left属性）

内联结束边距（取代margin-right属性）

内联边距（取代margin shorthand属性）

内联起始填充（取代padding-left属性）

内联结束填充（取代padding-right属性）

内联填充（取代padding shorthand属性）

文本对齐：起始位置（取代左值）

文本对齐：结束位置（取代右值）

这些值目前仅在Firefox中有效：

浮动：内联起始（取代左值）

浮动：内联结束（取代右值）

- cage rattler

目前我正在使用 CHtmlView，它使用较旧的IE浏览器，因此这个语法可能无法工作。当我迁移到 WebView2 时，很可能会起作用。 - Andrew Truckle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcos Pérez Gude · Accepted Answer

根据主贴中的评论，您可以使用属性选择器来定位并切换文本方向：

[dir="rtl"] .textCongregation{ text-align: right; }
[dir="rtl"] .textTitle { text-align: left; }

了解属性选择器的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

可能更好的选择

如果rtl仅在父元素上定义而不在子元素上定义，则:dir()伪类选择器可能更可取。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

您可以在此jsfiddle中查看其功能，其中body具有设置为rtl的dir属性，但子元素没有。

https://jsfiddle.net/ua8ksr1z/