Управление направлением CSS для LTR и RTL

Вот CSS/HTML файл:Управление направлением CSS для LTR и RTL

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

Все хорошо. Но, если я изменю реж атрибут РТЛ и и языки атрибута ар, расположение является неправильным. Два объекта div обмениваются правильно, но выравнивания текста теперь неправильные. Они должны быть отменены.

Я знаю, что я могу создать два новых класса CSS для RTL и использовать противоположное выравнивание текста, но так или иначе, что браузер может это сделать? Я предположил, что он заменит выравнивания. Я имею в виду?

На английском языке:

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

источник

2016-03-23 Andrew Truckle

Использование таблиц вы не можете поменять местами. Если вы измените свой макет таблицы на div, вы можете сделать «float: left» и «float: right» и наоборот, используя атрибут типа .textCongregation {float: left; } [dir = "rtl"] .textCongregation {float: right; } 'С помощью этого небольшого фрагмента кода вы достигнете –

Что делать, если я хочу сохранить таблицу? Должен ли я иметь два выделенных класса, которые меняют свойства выравнивания текста? Остальные мои таблицы автоматически меняют текст ячейки справа налево и т. Д. –

Да, направление текста в порядке, проблема в структуре html, вы не можете переместить td из своего места в другое (поменяйте tds) и если я хорошо понимаю ваш вопрос, вы должны это сделать –

Согласно с комментариями мы говорим в основном посте, вы можете настроить таргетинг с селекторами атрибутов и поменять направление текста:

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

Узнайте больше о селекторе атрибута:

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

источник

2016-03-23 15:29:02

Управление направлением CSS для LTR и RTL

ответ

Смежные вопросы