userstuff blockquotes in right-to-left languages should have border on right, not left

Description

If you put the following blockquote of some Hebrew text (stolen from the translation of Naomi's speech at the Hugos) in a work, it will produce a block of text with a border on the left side, which is weird in right to left languages:

 

 

Likewise, a blockquote included in an FAQ that's written in a RTL language will have the border in the same odd place (these blockquote elements generally won't have dir="rtl" on them directly – they get the direction from a parent div).

Ergo, we need to add some CSS to basically flip the styling we use in LTR languages:

 

 

The first selector should take care of blockquotes in the FAQ, while the second should take care of blockquotes in works (and in news posts until is done).

 

Testing notes

Also try including a blockquote with the direction set to ltr in a Hebrew or Arabic FAQ and make sure the border is still on the left.

 

Activity

Show:
Sarken
June 24, 2020, 11:51 AM

Adi M.

I don't have a JIRA account so here are my notes:

News posts and FAQs work great (yay! \o/). The blockquote tag automatically adds the line to the right side of the text, and if I change it to blockquote dir="ltr" it aligns the text to the left and moves the line to be on the left side of the text.

Works are where things aren't working smoothly. What I did was copy a work in Hebrew into the rich text editor and add a blockquote to some part of it using the quote button. It appears okay on the editor itself (I'll attach pics), but when posting the line is on the left side of the text (though the text is indeed indented on the right side). In order for the line to be on the right side, I need to go to the HTML editor and manually add dir="rtl" to the blockquoate tag. I will note that when the text of the blockquote is highlighted in the rich text editor, the direction button of the editor does recognize the text as RTL. It just doesn't add the direction attribute to the tag.

(Also tested English text inside the work, and for English everything is okay at the moment)

Pics following

Adi M.

What the RTE shows

What the HTML editor shows

What the work shows

What the work should show in an ideal situation (this is after I added the direction tag manually)

sarken

Thank you! The behavior of the RTE will unfortunately depend on the source you're pasting from and isn't something we have much control over -- if the source has the dir attribute on the block quote, it should stay there when you copy and paste; if it's on the paragraph tags, it will stay there instead.

Because neither the block quote nor any of its parents have the dir attribute set to RTL, the border initially appearing on the left is expected. It's possible that if you had pressed the RTL button on the RTE after pressing the block quote button, it would have fixed it, but I can't say for certain -- the RTE is a third party tool, so I'm not 100% sure what its inner workings are like.

When we start automatically adding dir="rtl" on some container element (like we do for news posts) based on the work's selected language, that should help, though.

james_
June 27, 2020, 7:21 PM

Looks good to me

DeployedToBeta

Assignee

Alix R

Reporter

Sarken

Roadmap

Internationalization
Misc

Priority

Medium

Affects versions

Fix versions

Components

FrontEnd

Difficulty

Easy

Required Access Level

Admin

Milestone

Internal 0.9