Managing the CSS direction for LTR and RTL

user_2287576 0
Viewed 6398

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>

English Example

In Arabic:

<MIDWEEK MEETING SCHEDULE                     CONGREGATION NAME>

Arabic Example

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>
css html
2 Answers

Advances in flow-relative CSS properties and values make this much easier.

.textCongregation {
  text-align: start;
}

The following properties and values are well supported at this time across modern browsers. In parentheses are the older, commonly used LTR terms.

inset-inline-start (in place of left property)

inset-inline-end (in place of right property)

margin-inline-start (in place of margin-left property)

margin-inline-end (in place of margin-right property)

margin-inline (in place of margin shorthand property)

padding-inline-start (in place of padding-left property)

padding-inline-end (in place of padding-right property)

padding-inline (in place of padding shorthand property)

text-align: start; (in place of left value)

text-align: end; (in place of right value)

These values currently only work in Firefox:

float: inline-start; (in place of left value)

float: inline-end; (in place of right value)

user_25689740
Related