search

Postleaf / postleaf

Simple, beautiful publishing with Node.js.
https://www.postleaf.org/
MIT License
504 stars 204 forks source link

RTL support #20

Open claviska opened 7 years ago

claviska commented 7 years ago

I want to make sure everyone can use Postleaf, so RTL language support is imperative. Follow this thread for updates.

venatoria commented 7 years ago

I will start working on the default theme to make it support RTL.

claviska commented 7 years ago

Awesome. I've created an issue for RTL in Empower to keep things organized.

Let's use this thread for RTL support in the admin panel and https://github.com/Postleaf/empower-theme/issues/1 for RTL in the default theme 😀

claviska commented 7 years ago

Thanks for submitting the Arabic translation. Looks great!

As for RTL support in the admin panel, it seems that it should be as simple as adding the following attribute and adjusting some styles:

<html dir="{@i18n type="meta" term="direction"/}">

That helper outputs ltr or rtl depending on the language pack. Unfortunately, it looks like there are a number of styles that need to be adjusted to make it usable:

screen shot 2017-05-04 at 10 34 24 am screen shot 2017-05-04 at 10 34 16 am screen shot 2017-05-04 at 10 35 24 am

Some sources recommend using a separate stylesheet for RTL, but I think it would be better to include RTL styles in the same .scss file since each page has its own and components are modularized (it wouldn't make sense to separate it out).

Any suggestions for tackling this?

venatoria commented 7 years ago

Hi,

Yes most of the time it would involve simply adding the tag and it looks ok (didn't test yet). It's recommended to separate it because styling RTL most of the time involve more than just that tag (alignments in some places, more places to specify the direction, some font needs to be included as default font won't necessarily play nice with Arabic or Hebrew for instance.. etc )

I recommend we do it and see the volume of styling needed.. if not much (seems to be the case) then no need for a separate style.

claviska commented 7 years ago

I get that — we'll definitely need to override styles. Just saying we can target them like this in each stylesheet to keep some sense of organization (take a look at how styles are structured and you'll see what I mean):

/* Current styles here */
.some-selector {
  ...
}

/* RTL styles below in the same scss file */
html[dir="rtl"] .some-selector {
  ...
}
claviska commented 7 years ago

You can test the direction by changing:

<html>

To this:

<html dir="{@i18n type="meta" term="direction"/}">

In source/views/admin/layout.dust.

claviska commented 7 years ago

I'm removing this from the alpha 5 milestone because RTL support is considerably more difficult to implement than I expected.

A large part of the problem is Bootstrap, which doesn't support RTL and doesn't seem to have it on their official radar. There are a number of issues about it that got closed or pushed back for "future versions." Alas, it seems like it's been that way since version 2. 😞

There are a number of third party projects that attempt to add support for RTL to Bootstrap, but most target Bootstrap 3. I'm also reluctant to add another dependency that may or may not be well supported down the road.

Related tickets:

Some good news is that they're saying RTL support is slated for after 4.0 hits stable. Hopefully, we can resolve this and make Postleaf available in any language once that lands.

In the meantime, I'm open to clean, alternative ways to manage RTL support. If anyone has ideas, I'd love to hear them.

Since the Arabic language pack isn't properly supported, I'm removing it from the next alpha to prevent confusion. It's available here so everyone can use it for testing:

ar_ar.json.zip

venatoria commented 7 years ago

Hi,

I have developed some RTL sites using Bootstrap. .there are some issues but are surmountable. To not add to your constraints, I will work on it from my side and ping you when I get something.

claviska commented 7 years ago

Sounds good. I'm not blowing this off, but I don't want it to hold up development either. Hopefully we can get RTL worked out before stable. 😀