RTL Direction of the document leaks into the card

[ibnesayeed]

When the card is embedded into an RTL page, some components of the card such as favicons are placed at the unintended side as shown in the following screenshots.

In an LTR page

In an RTL page

Ideally, we should identify the text direction of the memento and render the card in that direction, independent on the direction of the host document. If doing that sounds difficult initially, we should at least isolate the direction property of the card by explicitly declaring it to be ltr. This can be done in two ways, either by adding a dir="ltr" attribute to the top-most element of the card or by assigning a direction: ltr; CSS property to it.

[shawnmjones]

Thanks for mentioning this because it would not have occurred to me.

So, because one is naturally reading RTL, then they would expect to see the icons on the right?

For RTL languages, why not align the whole card to the right side as well?

Also, how do you deal with mixed RTL/LTR?

[ibnesayeed]

This problem is a little more complex than you might think. Ideally the direction of the elements of the card should depend on the primary language of the elements on the card. However, some phrases used in the card such as Powered by, Other versions, and Current version etc. are in English, so blindly making things align right and flow from right to left would make the card ugly. Ideally, there should also be an option of localization, so these phrase can be translated in many languages and used accordingly.

To deal with content that has a mix of LTR and RTL text, we use Unicode's BIDI standards which stands for bi-directional. There are many old and modern CSS properties and HTML attributes/elements to handle different situations.

[ibnesayeed]

By the way, if we were to use CSS Grid, we can get rid of a lot of floats in the style.

[shawnmjones]

For future reference, the URI-M in the picture above is https://web.archive.org/web/20180621231600/https://www.urduweb.org/mehfil/

Is this correct @ibnesayeed ?

[shawnmjones]

If that is the URI-M, then, also for reference, this is what Embed.ly does for it.

[ibnesayeed]

For future reference, the URI-M in the picture above is https://web.archive.org/web/20180621231600/https://www.urduweb.org/mehfil/

Is this correct @ibnesayeed ?

Yes!

[ibnesayeed]

If that is the URI-M, then, also for reference, this is what Embed.ly does for it.

While they do not have an RTL layout for the card for RTL languages, they keep their card consistent, irrespective of the direction of the container page. They are achieving it by dynamically replacing the blockquote element with an equivalent iframe element using their supplied JS. Twitter does the same. This technique allows style isolation from the host page. The #48 is in this same realm.