Managing the CSS direction for LTR and RTL

Question

Here is the CSS/HTML file:

<!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>

This is the jiggle:

https://jsfiddle.net/mL9j6zgz/

All is good. But, if I change the dir attribute to rtl and and lang attribute to ar, the layout is wrong. The two div objects are swapped correctly, but the text alignments are now wrong. They need to be reversed.

I know I can create two new CSS classes for RTL, and use the opposite text alignment, but is there anyway that the browser can manage this? I assumed it would swap alignments. Am I making sense?

In English:

<CONGREGATION NAME                     MIDWEEK MEETING SCHEDULE>

In Arabic:

<MIDWEEK MEETING SCHEDULE                     CONGREGATION NAME>

Arabic 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>

Using tables you can't swap it. If you change your table layout to divs, you can make float:left and float:right and viceversa targetting by attribute like .textCongregation{ float:left; } [dir="rtl"] .textCongregation{float : right; } With this little piece of code you'll achieve — Marcos Pérez Gude
What if I want to keep the table? Must I have two dedicated classes that have the text-align properties reversed? The rest of my tables automatically swap the cell text from right to left etc. — Andrew Truckle
Yes, the text direction is fine, the problem is the html structure, you can't move a td from their place to another (swap the tds), and if I understand fine your question you need to make it — Marcos Pérez Gude
Setting my document to RTL will automatically render my cells in the reversed order. Swapping the cells is not what I want to do, it is reversing the text alignments. — Andrew Truckle
OH well!! I misunderstood your question. It's easy with the attribute selector, I will write an answer right now — Marcos Pérez Gude

Marcos Pérez Gude Marcos Pérez Gude · Accepted Answer · 2016-03-23T15:29:02

According with the comments we are talking in the main post, you can target with attribute selector and swap the text direction:

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

Learn more about attribute selector:

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

A possibly better option

The :dir() pseudo-class selector may be preferable if the rtl is only defined on a parent element and not on a child element. See https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

You can see this in action at this jsfiddle where the body has dir attribute set to rtl but the child does not.

https://jsfiddle.net/ua8ksr1z/

Managing the CSS direction for LTR and RTL

1 Answers

A possibly better option