Menu
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>
440
The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
By default, the text on the landing page is displayed in the left-to-right (LTR) order. This applies to both text created using the Text widget and user input in the form fields. You can change the text direction to RTL (right-to-left) by adding CSS code to the landing page.
Setting up a right-to-left pageAdd dir="rtl" to the html tag any time the overall document direction is right-to-left (RTL). This sets the default base direction for the whole document. All block elements in the document will inherit this setting unless the direction is explicitly overridden.
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
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/
54
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
