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

[i18n] RTL support #690

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[i18n] RTL support #690

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b65a373
[rtl] Add `dir=rtl` for right to left languages
sepans Apr 13, 2020
7360072
[rtl] Use `flex` instead of `float` for 'Hello' and search input
sepans Apr 13, 2020
23d0c46
[rtl] rtl css style overrides
sepans Apr 13, 2020
6da4690
[rtl] Move `sidebar` to layout for all pages and use `flex` for conta…
sepans Apr 13, 2020
b5fd450
[rtl] PR comments
sepans May 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ module.exports = function(grunt) {
assemble: {
pages: {
options: {
rtl: function() {
// Add needed right-to-left language codes in the array below
var rtlLangs = [];
return rtlLangs.includes(this.language);
},
expand: true,
flatten: true,
helpers: ['<%= config.src %>/assets/js/translation.js'],
Expand Down
29 changes: 23 additions & 6 deletions src/assets/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -619,8 +619,9 @@ form {
color: #666;
}

#search {
float: right;
.hello {
display: flex;
justify-content: space-between;
}

#search .twitter-typeahead .tt-dropdown-menu {
Expand Down Expand Up @@ -1167,7 +1168,6 @@ img.gallery-img {
#showcase-page .showcase-intro h1 {
font: italic 900 14.5vw "Montserrat", sans-serif;
color: #ED225D;
text-align: left;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👆 was not doing anything except breaking rtl 😄

text-transform: uppercase;
}

Expand Down Expand Up @@ -1998,7 +1998,7 @@ footer {
min-height: 100%;
background-color: rgba(51, 51, 51, 0.0);
}
#home-page {
.two-columns {
display: flex;
flex-wrap: row;
}
Expand All @@ -2018,7 +2018,7 @@ footer {
#i18n-btn {
position: absolute;
top: 2.5em; /* temp promo, 4.0em */
right: 1em;
margin: 0 1em;
}
#i18n-btn a {
font-family: "Montserrat", sans-serif;
Expand Down Expand Up @@ -2166,7 +2166,6 @@ footer {
.column-span {
margin: 0 1em 0 1em;
padding: 0;
float: left;
}
#menu.top_menu,
#menu {
Expand Down Expand Up @@ -2471,3 +2470,21 @@ iframe {
display: inline;
}
}

/* ======= Right-to-left modifications ======== */

html.rtl #lockup {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can the selector be selecting the lang attribute on the html tag instead of using a class on the tag?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that is possible. The downside is that for each new rtl language a lang item needs to be added (and possibly someone spending some time to figure it out and/or documenting it). To me, rtl class seems to be a small reasonable abstraction to cover them all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to try out just using the lang attribute for now, perhaps somewhere down the line we can look into automating the build to handle some of the details that needs to be added manually for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, what language should I put there? I can arbitrarily add either lang(fa) or lang(he), or all of them but in the above comment you suggested removing them all from the Gruntfile.js

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lang(fa) for now would be fine, do add a line comment about what the function of it is just above.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry about the delay. I removed elements from rtlLangs array as you suggested, but as for adding :lang(fa) I think it is exactly opposite of what I did for rtlLangs: adding code specific to a language that is not supported yet.
And also it gets ugly as we eventually add multiple rtl languages and chain css for all the language.

left: auto;
right: 1.25em;
}

html.rtl #home-page #asterisk-design-element {
right: auto;
left: 20%;
}

@media screen and (max-width: 719px) {
html.rtl .sidebar-menu-icon {
float: left
}
}
6 changes: 2 additions & 4 deletions src/data/examples/build_examples/all_examples_template.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ title: examples
slug: examples/
---

<div id="examples-page">
<div class="column-span">

{{> sidebar}}

<div class="column-span">
<div id="examples-page">

<main id="content" >
<h1>{{#i18n "Examples"}}{{/i18n}}</h1>
Expand Down
8 changes: 3 additions & 5 deletions src/data/examples/build_examples/example_template.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ title: examples
slug: examples/
---

<div id="examples-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">

<div id="examples-page">

<main id="content" >

Expand Down
6 changes: 2 additions & 4 deletions src/data/learn/learn.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ title: learn
slug: learn/
---

<div id="learn-page">
<div class="column-span">

{{> sidebar}}

<div class="column-span">
<div id="learn-page">

<main id="content">
<h1>{{#i18n "learn-title"}}{{/i18n}}</h1>
Expand Down
6 changes: 2 additions & 4 deletions src/data/libraries/libraries.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ title: libraries
slug: libraries/
---

<div id="libraries-page">
<div class="column-span">

{{> sidebar}}

<div class="column-span">
<div id="libraries-page">

<main id="content">
<h1>{{#i18n "Libraries"}}{{/i18n}}</h1>
Expand Down
8 changes: 5 additions & 3 deletions src/templates/layouts/default.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html class="no-js" lang="{{language}}">
<html class="no-js {{#if rtl}}rtl{{/if}}" lang="{{language}}" {{#if rtl}}dir="rtl"{{/if}}>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand Down Expand Up @@ -45,8 +45,10 @@
<p class='tagline'>{{#i18n "tagline6"}}{{/i18n}}</p>
</header>
<!-- close logo -->

{{> body }}
<div class="two-columns">
{{> sidebar}}
{{> body }}
</div>

</div> <!-- close class='container'-->

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/books/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: books
slug: books/
---

<div id="books-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="books-page">

<main id="content" >
<h1>{{#i18n "books-title"}}{{/i18n}}</h1>
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/community/contributors-conference-2015.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: community
slug: community/
---

<div id="community-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="community-page">

<main id="content" >
<h1>{{#i18n "2015contributors-conference-title"}}{{/i18n}}</h1>
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/community/contributors-conference-2019.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: community
slug: community/
---

<div id="community-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="community-page">

<main id="content" >
<h1>{{#i18n "2019contributors-conference-title"}}{{/i18n}}</h1>
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/community/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: community
slug: community/
---

<div id="community-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="community-page">
<main id="content">
<h1>{{#i18n "community-title"}}{{/i18n}}</h1>
<div class="community-statement">
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/copyright.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: copyright
slug: /
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main id="content" >
<h1>{{#i18n "copyright-title"}}{{/i18n}}</h1>
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/download/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: download
slug: download/
---

<div id="download-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="download-page">

<main id="content" >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/download/support.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: download
slug: download/
---

<div id="download-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="download-page">

<main id="content" >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/get-started/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: get started
slug: get-started/
---

<div id="get-started-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="get-started-page">

<main id="content" >

Expand Down
24 changes: 11 additions & 13 deletions src/templates/pages/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,18 @@
title: home
slug: /
---
<div id="home-page">
{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="home-page">
<main id="home">

<form id="search" method="get" action="https://www.google.com/search">
<input type="hidden" name="as_sitesearch" value="p5js.org" >
<input id="search_button" type="submit" aria-label="Search" class='sr-only'>
<input tabindex="1" id='search_field' type="text" size="20" placeholder="Search p5js.org" name="q" >
<label class="sr-only" for="search_field">Search p5js.org</label>
</form>

<h1>{{#i18n "p1xh1"}}{{/i18n}}</h1>
<div class="hello">
<h1>{{#i18n "p1xh1"}}{{/i18n}}</h1>
<form id="search" method="get" action="https://www.google.com/search">
<input type="hidden" name="as_sitesearch" value="p5js.org">
<input id="search_button" type="submit" aria-label="Search" class='sr-only'>
<input tabindex="1" id='search_field' type="text" size="20" placeholder="Search p5js.org" name="q">
<label class="sr-only" for="search_field">Search p5js.org</label>
</form>
</div>
<p style="margin-top:1em">{{#i18n "p1x1"}}{{/i18n}}</p>
<p>{{#i18n "p1x2"}}{{/i18n}}</p>
<span class='button_box'><a href="https://editor.p5js.org">{{#i18n "start-creating"}}{{/i18n}}</a></span>
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/color.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/coordinate-system-and-shapes.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >
<div class="attribution">
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/curves.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/debugging.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/interactivity.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >
<div class="attribution">
Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/p5-screen-reader.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >

Expand Down
7 changes: 2 additions & 5 deletions src/templates/pages/learn/program-flow.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ title: learn
slug: learn/
---

<div id="learn-page">

{{> sidebar}}

<div class="column-span">
<div class="column-span">
<div id="learn-page">

<main >
<div class="attribution">
Expand Down
Loading