3
Hier ist die CSS/HTML-Datei:die CSS-Richtung für LTR und RTL Managing
<!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>
Dies ist wackeln:
https://jsfiddle.net/mL9j6zgz/
Alles ist gut. Aber, wenn ich das dir Attribut rtl und und lang Attribut ar ändert, ist das Layout falsch. Die zwei div Objekte werden korrekt vertauscht, aber die Textausrichtung ist jetzt falsch. Sie müssen umgekehrt werden.
Ich weiß, ich kann zwei neue CSS-Klassen für RTL erstellen, und verwenden Sie die entgegengesetzte Textausrichtung, aber gibt es sowieso, dass der Browser das verwalten kann? Ich nahm an, dass es Ausrichtungen tauschen würde. Mache ich einen Sinn?
In Englisch:
<CONGREGATION NAME MIDWEEK MEETING SCHEDULE>
In Arabisch:
<MIDWEEK MEETING SCHEDULE CONGREGATION NAME>
Arabisch 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>
Verwenden Sie Tabellen, die Sie nicht austauschen können. Wenn Sie Ihr Tabellenlayout in divs ändern, können Sie 'float: left' und' float: right' verwenden und umgekehrt nach Attribut wie '.textCongationation {float: left; } [dir = "rtl"] .textCongregation {float: right; } 'Mit diesem kleinen Stück Code erreichen Sie –
Was, wenn ich den Tisch behalten will? Muss ich zwei dedizierte Klassen mit umgekehrten Textausrichtungseigenschaften haben? Der Rest meiner Tabellen vertauscht automatisch den Zellentext von rechts nach links etc. –
Ja, die Textrichtung ist in Ordnung, das Problem ist die HTML-Struktur, Sie können eine td nicht von ihrem Platz zu einem anderen verschieben (tauschen Sie die tds), und wenn ich Ihre Frage gut verstehe, müssen Sie es machen –