Как я могу правильно отображать свои повернутые заголовки как для LTR, так и для RTL? RTL сломан ⇐ CSS

[Anonymous]

Возьмите этот фрагмент HTML. По какой -то причине мои заголовки (повернутые вертикали) не отображаются правильно, когда документ является RTL. Это выглядит нормально, когда документ - ltr.

ltr

Код: Выделить всё

body {
font-family: Calibri;
font-size: 10pt;
}

table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

table th {
overflow: hidden;
}

table th,
td {
border: 1px #d3d3d3 solid;
padding: 2px;
}

table tbody tr:hover td {
color: #000;
background: #efefef;
}

.rowHeadings th {
background-color: gray;
}

.cellVerticalHeading p {
white-space: nowrap;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
display: inline-block;
line-height: 5.2;
}

.cellVerticalHeading p:before {
content: '';
width: 0;
padding-top: 110%;
/* takes width as reference, + 10% for faking some extra padding */
display: inline-block;
}

.cellAssignment {
text-align: center;
vertical-align: middle;
}

@media print {
thead {
display: table-header-group;
}

/*table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}*/
}

/* Dark mode for screens only */
@media screen and (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}

/* Main heading styling */
h1 {
color: #ffffff;
border-color: #aaaaaa;
}

/* Section headings */
h2 {
background-color: #252525;
color: #ffffff;
}

/* If there's a main heading div */
.heading {
background-color: #1a1a1a;
/* Slightly darker than h2 */
padding: 10px;
border-bottom: 2px solid #444444;
}

/* Table styles */
table {
border-color: #ffffff;
}

/* Table header row (th) - now clearly different */
th {
background-color: #333333;
/* Darker than table cells */
color: #ffffff;
font-weight: bold;
}

/* Table cells */
td,
th {
border-color: #666666;
background-color: #1e1e1e;
color: #e0e0e0;
}

/* Row hover effect */
table tbody tr:hover td {
background: #444444;
color: #ffffff;
}

.cellCategoryGroup {
background-color: #444;
/* Darker gray for better contrast */
color: #ffffff;
/* White text for readability */
}

/* Adjustments for specific elements in your HTML */
.rowHeadings th {
background-color: #444444;
/* Darker gray for better contrast */
}

.cellVerticalHeading p {
color: #ffffff;
/* White text for readability */
}

.cellAssignment {
color:  # e 0 e 0 e 0 ; < b r   / >         / *   L i g h t   g r a y   t e x t   f o r   r e a d a b i l i t y   * / < b r   / >     } < b r   / > } <   / c o d e >   < b r   / >   < p r e   C l a s s   =   " S n i p p e t - C o d e - h t m l   l a n g - h t m l   p r e t t y p r i n t - o v e r r i d e " > < c o d e > & l t ; ! D O C T Y P E   h t m l   P U B L I C   " - / / W 3 C / / D T D   X H T M L   1 . 0   T r a n s i t i o n a l / / E N "   " h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 - t r a n s i t i o n a l . d t d " & g t ; < b r   / > & l t ; h t m l   l a n g = " a r "   d i r = " r t l "   x m l n s = " h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m l "   x m l n s : m s a = " h t t p : / / w w w . p u b l i c t a l k s o f t w a r e . c o . u k / m s a " & g t ; < b r   / > < b r   / > & l t ; h e a d & g t ; < b r   / >     & l t ; t i t l e & g t ; P u b l i s h e r s   A s s i g n m e n t s   R e p o r t & l t ; / t i t l e & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; t a b l e & g t ; < b r   / >         & l t ; c o l g r o u p & g t ; < b r   / >             & l t ; c o l   w i d t h = " 2 0 % "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " 5 % "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " 1 0 % "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " 1 0 % "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >             & l t ; c o l   w i d t h = " * "   / & g t ; < b r   / >         & l t ; / c o l g r o u p & g t ; < b r   / >         & l t ; t h e a d   c l a s s = " r o w H e a d i n g s " & g t ; < b r   / >             & l t ; t h   c l a s s = " c e l l V e r t i c a l H e a d i n g " & g t ; < b r   / >                 & l t ; p & g t ; N a m e & l t ; / p & g t ; < b r   / >             & l t ; / t h & g t ; < b r   / >             & l t ; t h   c l a s s = " c e l l V e r t i c a l H e a d i n g " & g t ; < b r   / >                 & l t ; p & g t ; G e n d e r & l t ; / p & g t ; < b r   / >             & l t ; / t h & g t ; < b r   / >             & l t ; t h   c l a s s = " c e l l V e r t i c a l H e a d i n g " & g t ; < b r   / >                 & l t ; p & g t ; A p p o i n t e d   A s & l t ; / p & g t ; < b r   / >             & l t ; / t h & g t ; < b r   / >             & l t ; t h   c l a s s = " c e l l V e r t i c a l H e a d i n g " & g t ; < b r   / >                 & l t ; p & g t ; S e r v i n g   A s & l t ; / p & g t ; < b r   / >             & l t ; / t h & g t ; < b r   / >             & l t ; t h   c l a s s = " c e l l V e r t i c a l H e a d i n g " & g t ; < b r   / >                 & l t;p>Attendant


CBS Conductor


CBS Reader


Midweek Chairman


ناصح الصف الاضافي


Microphone


Platform


Midweek Prayer


Sound


Student — Bible Reading


Student — Discussion


Student — Talk


Assistant


Host


Co-host


Zoom Attendant


Midweek Meeting — Treasures


Midweek Meeting — Gems


Midweek Meeting — Living


Demonstrations


Weekend Chairman


Weekend Prayer


Interpreter


Watchtower Conductor


Watchtower Reader


Bible Verses Reader




Test
Female
Not appointed
Publisher










✔

✔


















< /code>
< /div>
< /div>
< /p>
 rtl < /strong> < /p>



  Если я удалю 110% накладку, это выглядит как: 
  

Подробнее здесь: [url]https://stackoverflow.com/questions/79680723/how-can-i-get-my-rotated-headings-to-display-correctly-for-both-ltr-and-rtl-rtl[/url]