Fix display of lists in RTL HTML publications #3257
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- passes the `page_text_direction` into the govspeak html publication component to ensure that lists display properly in right to left content - govspeak html publication is used as a wrapper for the govspeak component, with some additional styles included - it still accepts and passes through to govspeak a `direction` parameter - in this case, pages had the the correct `direction` class applied to the top of the page, which seems to work for most of the styles on the page, but the govspeak CSS for RTL is written specifically assuming that the `direction` class is applied to the govspeak component (wrapping element) rather than any higher element, so the styles weren't being used properly - this resulted in a very subtle problem where lists had a margin applied to the wrong side (the default left side, for LTR content) instead of the right, which looks fine in most situations (because there's a gap between the right edge of the content and the left edge of the right hand column) unless the screen is shorter than the contents of the right hand column, forcing a scrollbar, which overlapped the bullets of the list - passing the govspeak html publication a `direction` option (that already existed, but wasn't being used for this purpose) fixes the problem, as the govspeak component now applies correct RTL styling to lists - consequence is that for LTR content this parameter is now explicitly passed, instead of previously assumed, but a quick visual/sense check suggests that this should be fine
AshGDS
approved these changes
Jul 8, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What / why
page_text_directioninto the govspeak html publication component to ensure that lists display properly in right to left contentdirectionparameterdirectionclass applied to the top of the page, which seems to work for most of the styles on the page, but the govspeak CSS for RTL is written specifically assuming that thedirectionclass is applied to the govspeak component (wrapping element) rather than any higher element, so the styles weren't being used properlydirectionoption (that already existed, but wasn't being used for this purpose) fixes the problem, as the govspeak component now applies correct RTL styling to listsExample HTML publication pages:
Visual changes
First, here's the problem.
Now, with the
.direction-rtlclass applied to the govspeak component, it looks like this:Trello card: https://trello.com/c/HXiajSKv/183-bullet-points-cut-off-in-html-attachments-in-rtl-languages