Our HTML application is quite complex and includes support for right-to-left (RTL) languages. However, when we switch the HTML to RTL using the <html dir='rtl'> attribute, not all elements are reversed as expected. Certain elements that were previously aligned using CSS do not reverse.
For example:
<!DOCTYPE html>
<html>
<head></head>
<body>
<table>
<tr><td>Some text long text</td><td>Even More long text</td></tr>
<tr><td style='text-align:right;'>aligned to right</td><td>aligned to left</td></tr>
</table>
</body>
</html>
When applying
<html dir='rtl>
In this scenario, one would expect the text alignment to be mirrored in the opposite direction, but it does not happen. Currently, we address this issue by loading a secondary template CSS file after the default one to override these alignments. However, I believe there must be a more straightforward solution.
Is there an easier method to reverse or flip alignments for RTL languages?