Improve ltr support in new website

Adding Arabic to the staging site I have noticed there are still some parts of the layout that work for rtl but not so much for ltr.

Please check that the layout is correct for ltr languages:

​https://lektor-staging.torproject.org/tpo/staging/ar/download/

From: https://trac.torproject.org/projects/tor/ticket/30159

assigned to @antonela and unassigned @hiro

@emmapeel could we work together on this one?

Sure thing!

Things I see on the link are:

• The 'Donate Now' button is too close to the Tor logo.
• The titles on the 'stay safe', etc sections are mostly still aligned to the left.

I can update the staging site to be closer to master, or we could work on develop

added Frontend + 1 deleted label

i see the bootstrap css has a text-align: left for the body, i took it out and havent seen much problems in ltr languages, and it fixes a lot of the wrong aligns on the templates, i.e. the paragraphs at https://lektor-staging.torproject.org/tpo/staging/ar/

is there a place were the process to add styles and compile the css is documented?

I have a fix for the donate button. For anything else we have a class that we can use from bootstrap: https://getbootstrap.com/docs/4.3/utilities/text/#text-alignment We can add it whenever the language alignment requires it.

We actually already use these classes with the following expression:

{{ bag('alternatives', alternative, 'direction') }}

I have now modified the templates in master to include the following:

        {% set locale = bag('alternatives', this.alt) %}
        <main role="main" class="mx-auto col-12 {{ locale.order }} {{ locale.direction }}">

Please merge this into the translation branch and see if this fixes most of our issues.

This fix is now used in tpo and in support too.

This fixes for the main part of the page. Headers and footer and probably other pages might need more working.

I have merged to staging and translation branches, see for example:

https://lektor-staging.torproject.org/tpo/staging/ar/

I see:

• The banner has still some strings aligned to the left
• the big paragraph at the end of the homepage ('about us') is also aligned to the left
• the footer blocks are well aligned but the text is still aligned to the left
• https://lektor-staging.torproject.org/tpo/staging/ar/about/history/ is also aligned to the left although the text is rtl.

This was fixed:

• The banner has still some strings aligned to the left
• the big paragraph at the end of the homepage ('about us') is also aligned to the left
• the footer blocks are well aligned but the text is still aligned to the left

Opening a new ticket for this one

• https://lektor-staging.torproject.org/tpo/staging/ar/about/history/ is also aligned to the left although the text is rtl.

closed

mentioned in issue #65 (closed)

mentioned in commit 9dc3ba54

mentioned in merge request !74 (merged)

mentioned in merge request !77 (merged)

mentioned in commit 701bcd09

mentioned in merge request !78 (merged)

mentioned in issue #218 (closed)