Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add rtl langauge support #2367

Merged
merged 1 commit into from
Mar 3, 2022
Merged

Add rtl langauge support #2367

merged 1 commit into from
Mar 3, 2022

Conversation

chris-gds
Copy link

@chris-gds chris-gds commented Feb 21, 2022 •
edited
Loading

What

Allow right-to-left (rtl) languages to be printed correctly

Why

Some languages read rtl, when these languages are active the print stylesheets do not adjust to cater for this.

Visual Changes

Before > After

Screenshot of GOVUK page with arabic content while print has been selected and modal is open, the text is aligned left-to-right, this update changes this text to right-to-left

Anything else

Testing links

A different approach was taken at the start which involved adding a blanket solution to govuk_publishing_components to support all rtl while desirable, after review multiple relevant issues were noted. As a result a more incremental approach has been taken.

At present screen (and print) apply rtl which also impacts the layout and English text, a more granular localisation approach should be considered

@govuk-ci govuk-ci temporarily deployed to government-f-add-rtl-su-mw0rgx February 21, 2022 12:20 Inactive
@chris-gds chris-gds mentioned this pull request Feb 21, 2022
Closed
@govuk-ci govuk-ci temporarily deployed to government-f-add-rtl-su-bk4h7x February 23, 2022 12:05 Inactive
@chris-gds chris-gds marked this pull request as ready for review February 28, 2022 11:34
@chris-gds
Copy link
Author

chris-gds commented Feb 28, 2022 •
edited
Loading

While working on resolving rtl print stylesheets issue, it was noted that this <html dir="rtl" lang="ar"> should exist on the html tag. In this context this should apply to the layout_for_public within the govuk_publishing_components

Thanks to @jon-kirwan for highlighting this resource 🎉
https://www.w3.org/International/questions/qa-html-dir

Historically a lot of our code focuses on the CSS to action any changes in text direction that pertain to right-to-left languages but actually this should exist on the HTML and the individual block elements

Eg

government-frontend/app/assets/stylesheets/views/_case-studies.scss

Line 5 in 63a95ef

direction: rtl; 

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">

And below (seen on this page) should change from being class to markup

<div class="gem-c-govspeak govuk-govspeak direction-rtl" data-module="govspeak">

Equally the guidance notes not to use CSS

Do not use CSS to apply base direction in HTML pages.
Basically, this is because you want the directional information to be available even when the CSS is not. The directional information can affect the semantics of your content, and so should be part of the markup. (See a longer explanation).
Both the CSS and HTML specs echo this same admonition.

This is echoed within Mozilla docs

Note that text direction is usually defined within a document (e.g., with HTML's dir attribute) rather than through direct use of the direction property.

There is also a <bdo> tag that can be used in conjunction for mixed blocks of text that would apply in certain contexts on our pages

As this PR incrementally improves the print stylesheets I'm going to suggest this goes ahead. However attention on this has revealed another concern that needs addressing that has been captured.

@chris-gds chris-gds mentioned this pull request Feb 28, 2022
Merged
@chris-gds chris-gds requested a review from jon-kirwan March 1, 2022 16:25
@edwardkerry edwardkerry merged commit 09abdef into main Mar 3, 2022
@edwardkerry edwardkerry deleted the add-rtl-support branch March 3, 2022 10:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jon-kirwan jon-kirwan jon-kirwan approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@chris-gds @jon-kirwan @govuk-ci @edwardkerry