Page MenuHomePhabricator

Bidi isolate user-content in Event tool
Closed, ResolvedPublic1 Estimated Story Points

Description

Events and programs can be added by users regardless of the interface language. There could be events in any language under a single program, and content can be always mixed regardless of RTL/LTR interface support.

Users who look at the list of events in English may still see content in RTL. For example:

  • The name of a single event may be in another language
  • A category may be included that is from an RTL wiki
  • Username may have RTL/LTR or a mix of characters

This means that content is being mangled even without starting to support the RTL in the interface itself. If any user inserts any of the above (category, username, or event/program name in RTL) the result may look broken:

grantmetrics-heb.png (122×408 px, 10 KB)

(See the parentheses specifically)

Note: This will happen regardless of whether we intentionally support RTL for the interface, because users can insert any sort of text to their usernames, categories and event names. So this task is separate from whatever product decision is made for full RTL support.

Luckily, this is not too terrible to fix; we just need to wrap all user-controlled input with a bidirectional isolation (<bdi>...</bdi>) or in CSS (unicode-bidi: isolate;)
See https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi

Example:

English interface but the event name is in Hebrew with parentheses:

grantmetrics-heb-mangled.png (84×570 px, 10 KB)

After wrapping with isolate tags (<bdi>{{ event.displayTitle }}</bdi>):

grantmetrics-heb-fixed.png (89×574 px, 10 KB)

Possibly, we can create a twig helper method that wraps user-content with <bdi> tags, or add a class to all such cases to add the CSS override.

Event Timeline

This is new to me! I need to do the same thing for all my other tools. On Pageviews, specifically, we put a lang="en" and dir="ltr" attributes where the page titles are, since we know the source language. That seemed to do the trick but it requires a little more logic. If <bdi> works forever and always that seems most preferable!

This is new to me! I need to do the same thing for all my other tools. On Pageviews, specifically, we put a lang="en" and dir="ltr" attributes where the page titles are, since we know the source language. That seemed to do the trick but it requires a little more logic. If <bdi> works forever and always that seems most preferable!

<bdi> will isolate the text and show it in its "natural" order; if the user-specified text is RTL, it'll display correctly even if the larger context is LTR -- which makes it better than forcing the content to dir="ltr".

It's usually good practice to wrap user-specified content that you can't control (and might be RTL without your control) with isolation, so yeah -- it's probably a good idea to use it. I think that "bdi" should probably go upstream to Intuition itself. We have {{BDI}} magic word in mw.msg, so it makes sense to implement that in Intuition, and that would make all other tools that use it win by default.

Mooeypoo set the point value for this task to 1.Oct 6 2018, 7:35 AM
Mooeypoo moved this task from Ready to Needs Review/Feedback on the Community-Tech-Sprint board.

This is merged. Should it be marked as "Done?"

Niharika triaged this task as Medium priority.
Niharika subscribed.

I think so.

It's been merged into the bundle but hasn't yet been integrated into Event Metrics https://github.com/wikimedia/grantmetrics/pull/130

Got ya. Thanks for clearing that up.

It's now merged into Event Metrics. Feel free to take a look at https://tools.wmflabs.org/grantmetrics-test/programs/52/events/76

There are some places bidirectional still doesn't work, such as inputs and flash messages. This can be addressed later, as I think it will require a different solution.

Deployed! @Mooeypoo Should we keep this task open so we don't forget about flash messages / inputs?

MusikAnimal moved this task from QA to Q2 2018-19 on the Community-Tech-Sprint board.

This has long been deployed, closing as resolved.