How to tile HTML elements from left to right using CSS

January 10, 2024

I have a website with some tiled HTML elements (tables), which are tiling left-to-right. I need the tables to be tiled from right-to-left, as the content of the tables is in Arabic. A picture of the current format is linked here.

>Solution :

Per my comment: Make the container of the inline-block elements right-to-left; then reset the english elements back to left-to-right.

.glossed {
  direction: rtl;
}

.glossed > span {
  display: inline-block;
}

.glossed table {
  text-align: center;
}

.glossed tr + tr {
  direction: ltr;
}

<div class="glossed">
  <span><table>
    <tr><td>(ar) We worship</td></tr>
    <tr><td>(en) We worship</td></tr>
  </table></span>
  <span><table>
    <tr><td>(ar) you alone</td></tr>
    <tr><td>(en) you alone</td></tr>
  </table></span>
</div>

I put the direction directives in CSS for convenience, even though it is more common to have it as an HTML attribute (dir="rtl") since it normally pertains to the content, not style.

Apologies I can’t write Arabic, but the parentheses should make it obvious which order is being observed in each line.