Text in userstuff table headers in right-to-left languages should be aligned right, not left

Description

If you put the following HTML containing a table with Arabic text (from the translation of our "AO3 Statistics 2020: A Look Behind the Scenes" post) into a work, the headers (<th>, for both rows and columns) will be left-aligned instead of right aligned:

We need to add some CSS to basically flip the styling we use in LTR languages, similar to AO3-5737.

How to test: Add a table using an RTL language in its headers into the body of a work / an FAQ / an admin post and make sure it's displayed like this:

Activity

Show:
Nat
October 13, 2020, 4:17 AM

Added a border cause i’m easily confused

Looks correct to me!

lydia-theda
October 24, 2020, 1:40 AM

When pasting the above html into a new work (set to Arabic, not sure if that matters), I had to manually adjust the table tag before it would display correctly:

(adding a RTL div also worked, but my point is I wasn’t able to just paste the HTML as-is. Though since I have very little experience with RTL, perhaps that is already assumed that you have to adjust the given HTML?)

Anyway, it looked fine once I did that.

Sarken
October 25, 2020, 5:34 PM

That makes sense @lydia-theda: admin posts and FAQs have the rtl direction handled automatically based on the selected language, but works don’t.

lydia-theda
October 26, 2020, 5:10 AM

cheers, wasn’t sure because the wording in the issue implied just copying into a work as-is was all that was needed (which I didn’t think was the case, but figured better to check)

DeployedToBeta

Assignee

Alix R

Reporter

redsummernight

Roadmap

Internationalization
Misc

Priority

Medium

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Easy

Required Access Level

Admin

Milestone

Internal 0.9