html - 管理 LTR 和 RTL 的 CSS 方向-6ren

html - 管理 LTR 和 RTL 的 CSS 方向

转载作者：搜寻专家更新时间：2023-10-31 22:58:37

这是 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/

一切都很好。但是，如果我将 dir 属性更改为 rtl 并将 lang 属性更改为 ar，则布局是错误的。两个 div 对象已正确交换，但文本对齐现在是错误的。它们需要被逆转。

我知道我可以为 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>

最佳答案

根据我们在主帖中讨论的评论，您可以使用属性选择器定位并交换文本方向:

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

一个可能更好的选择

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

您可以在这个 jsfiddle 中看到这个 Action ，其中 body 的 dir 属性设置为 rtl 但 child 没有。

https://jsfiddle.net/ua8ksr1z/

关于html - 管理 LTR 和 RTL 的 CSS 方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36181421/

文章推荐： node.js - 什么是 Node.js 的 Swig 模板中的自动转义？

文章推荐： swift - 如何传递对 boolean 值的引用而不是它的值？

文章推荐： node.js - 如何在 Docker.io 中运行导入的图像？

javascript - MapBox 方向——获取自己的 Lat 和 Lng 方向
我正在使用 MapBox 绘制兴趣点，这些兴趣点是通过基于 Rails 构建的用户生成表单提交的。当前，用户输入一个地址，然后该地址通过 gem(地理编码器)计算出 Lat 和 Lng。从那里我通过
WPF 方向
我正在纵向平板电脑上开发应用程序。但是，当平板电脑转到横向模式时，应用程序也会转动，并且所有对齐方式都将被取消。那么有什么方法可以将我的 WPF 应用程序锁定到一个方向？谢谢! 最佳答案我必须同
ios4 - map 方向
我在我的应用程序中的 mkmapview 上显示了两点之间的路线，但我想显示这两点的方向。点的纬度和经度存储在 NSArray 中。最佳答案这可能为时已晚，您可能已经解决了它，但这是我已经测试过并
math - 来自两个向量的旋转/方向
我正在处理一个小型 Unity3D 项目，我需要从另一个工具导入一些数据。该工具通过两个向量为我提供了对象方向，我需要将其移植到 Unity。例如，我有这两个向量； x = Vector( 0.70
iphone - UIActionSheet 方向
有没有办法以编程方式设置 UIActionSheet 的方向？我的 iPhone 方向是纵向，但 UIActionSheet 需要是横向。这可以吗？编辑: 所以我的问题是我不想将 rootviewc
Python根据2个GPS坐标计算速度、距离、方向
如何在 Python 中根据 2 个 GPS 坐标计算速度、距离和方向(度)？每个点都有纬度、经度和时间。我在这篇文章中找到了半正矢距离计算: Calculate distance between
CSS 方向 iPhone
需要一个代码来更改 div 的属性，具体取决于 iPhone 设备的位置。在这段代码工作之前现在停止这样做了吗？ @media all and (orientation:portrait) { .
iPad 方向/框架尺寸问题
在“View Did Load”中，我试图确定 View 的大小，以便我可以适本地调整 subview 的大小。我希望它始终围绕屏幕的长度和宽度拉伸(stretch)，而不管方向如何。 quest *
c - 方向、方向对象
如何根据对象的方向移动对象？我的意思是，我有一个处于某个位置的立方体，我想绕 Y 轴旋转并根据它们的方向移动。然后再次移动和旋转以改变方向。像这样的事情: 最佳答案在 JS 中你可以尝试这样的事情:
android - ActionBar 方向
我目前有一个处于横向模式的 SurfaceView。目前我正在尝试使用添加操作栏/菜单栏 /*Action Bar */ //this.setRequestedOrientation(Activit
iphone - MPMoviePlayerViewController 方向
我正在使用 cocos2d，我想播放电影。为此，我创建了 MPMoviePlayerViewController 并将其作为 [[CCDirector sharedDirector] openGLVi
iphone - Kobold2d - 方向
我在 cocos2d 中创建了一个游戏，因为我想使用我找到的一些 UIKit 元素 kobold2d。我移植了游戏，但问题是我的 iPhone 刺激器旋转了，但不是显示的节点。必须使用: bac
iphone - iOS 方向
我可以在 iOS 中的 UITabBarController 中更改方向吗？我有这样的东西: UITableViewController-> Team Tab -> UINavigationContr
iphone - UINavigationController 方向
我有 UINavigationController 和几个 View Controller 。这是他们的名单:主->相册->图片现在，在第一个和第二个(主要和专辑)中，我希望 UINavigatio
html - 响应式网站应满足多少种不同的分辨率/方向？
人们普遍认为，在过去几年中，标准显示器的最佳网站宽度已从 800 像素增加到 1024+ 像素(网站通常为 960 像素宽)，但随着移动设备的兴起，哪些分辨率被认为是“关键”迎合？例如，this
c - GtkLevelBar 方向
我正在做一个 GTK+ 项目，我需要一个像这样的垂直 GtkLevelBar: 但我不知道如何从默认的水平 GtkLevelBar 翻转它: 这是我的 GtkLevelBar 代码。 GtkWidge
Javascript Angular 方向
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
iOS 方向 UICollectionView
我的 collectionView 以横向模式显示 20 个项目。在纵向模式下，我只想展示 8 个可重复使用的项目。我怎样才能做到这一点？ collectionView 何时在数据源上调用 colle
android通过代码设置 Activity 方向
可以在 list 文件中设置 Activity 的方向。但是否也可以通过代码来实现？如果是，怎么办？谢谢! 最佳答案 setRequestedOrientation(ActivityInfo.SC
Android map 方向
我希望在纬度、经度和用户当前位置之间集成方向。我希望通过点击按钮将用户定向到已安装的 Google map /其他应用程序并显示方向。我搜索了 SO 和谷歌，但找不到好的来源，因此我发布了这个问题。

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 管理 LTR 和 RTL 的 CSS 方向

一个可能更好的选择