Mjml: Right to Left support

[hadifarnoud]

I could not find anything on RTL support.

[ngarnier]

hey @hadifarnoud, maybe you can help us implement RTL support?

Would love to see how we can do that or even better, a contribution from your side?

[hadifarnoud]

Sure! let me know where to begin and what to do. I'm not how you guys are going to add that to mjml.

[ngarnier]

We have no specific experience with RTL support; do you? We would love to benefit from someone's experience on this!

[hadifarnoud]

I do @ngarnier. It's easy to do with direction:rtl and text-align:right in CSS. just implement something and I'll help test and refine it :)

[ngarnier]

Hey @hadifarnoud, thanks for your answer!

RTL's not the priority right now as we're working on incremental improvements and new features (especially components) but we'll welcome any contribution to support it!

[f4f343w4tcfwv4tz5tb5]

I can see how RTL would be useful especially for transactional messaging and B2C messages. Would be a great attribute to add to miml-text component direction="l2r" or "direction="r2l" with probably "l2r" being the default.

Would it be more useful to add it to the whole column? I can see that being useful but it may break other things where as adding it to the text should be safe.

@ngarnier We need an "MJML Labs" where we can see components that are in progress ;)

[hadifarnoud]

It could be used in column, text, invoice, button, hero, and table. 

If someone does it for one of these, I can figure out how to do it for others. 

On Thu, 02 Jun 2016 at 23:30 zrb0529

<
mailto:zrb0529 [email protected]

wrote:

I can see how RTL would be useful especially for transactional messaging and B2C messages. Would be a great attribute to add to miml-text component direction="l2r" or "direction="r2l" with probably "l2r" being the default.

Would it be more useful to add it to the whole column? I can see that being useful but it may break other things where as adding it to the text should be safe.

https://github.com/ngarnier
We need an "MJML Labs" where we can see components that are in progress ;)

—

You are receiving this because you were mentioned.

Reply to this email directly,
https://github.com/mjmlio/mjml/issues/230#issuecomment-223389167
, or
https://github.com/notifications/unsubscribe/AAj_8MiIcY52jZItqeOzDL6n7Ow9-irBks5qHyg_gaJpZM4IY4z_
.

https://github.com/mjmlio/mjml/issues/230#issuecomment-223389167

[ngarnier]

Indeed, the best way would probably to add a direction attribute that would be set to l2r by default to text components such as text and button (mj-attributes would then help setting it a default direction).

@zrb0529, one way to see what we're working on is to check the Work in Progress label :-)

[rubinsh]

I used the following as a workaround to generate an RTL template.

  <mj-head>
    <mj-style>
      * { direction: rtl; text-align: right !important; }
    </mj-style>
  </mj-head>

of course you can define more granular css rules if you want only some elements to be rtl.
In general - I would expect a direction="ltr" attribute to just add an inline style direction:rtl;
or a dir="rtl" attribute to generated html the element.

I don't know much about MJML (yet) as I just started using it today, but I would be happy to contribute in the future.

[ngarnier]

That's actually a very nice workaround, thanks for sharing @rubinsh! Just a quick note, you might want to add inline="inline" as an attribute to mj-style so it's inlined instead of added in the head.

  <mj-head>
    <mj-style inline="inline">
      * { direction: rtl; text-align: right !important; }
    </mj-style>
  </mj-head>

[hadifarnoud]

nice to have a workaround for now. still, would be cool to have rtl natively

[hadifarnoud]

this method overrides text align everywhere. even if I set align="center". any idea how to fix it?

[rubinsh]

@hadifarnoud did you try
text-align: center !important

[hadifarnoud]

I have but still the other one seems to be considered

[aganglada]

When is this issue planed to be developed? Thanks!

[iRyusa]

Well the best workaround is to use mj-style with css-class as said earlier.

I don't think we can go deeper than this (adding an attribute on every component would be painful to manage ?)

[hadifarnoud]

I think adding RTL support is very important. without that this framework cannot be used in many big projects that have to support multiple languages. the current solution is a dirty fix. attribute is more clean way of doing it

[iRyusa]

Only issue is, an rtl attribute would conflict with most of align attribute i think ?
We might need a little help with starting a PR on this one and trying some implementation so we could discuss on it.

[damianvila]

Is there a way to make direction="rtl" applied to a section, work in grouped columns too?
Right now it seems it doesn't work: https://mjml.io/try-it-live/SkXSfqCPE

[kmcb777]

@damianvila direction only applies on section's direct children, but for what you want you can set direction on mj-group

[damianvila]

@kmcb777 That seems to be undocumented, right? It works, though. Thanks!

[lucidkodo]

@damianvila, i was looking for support on this as well. I found out the only ~hack~ way is to add in the direction: bla bla property in the compiled html, instead of mjml directly.