We will try to get to this in Q2, but patches submitted by others before then are welcome!

@Ladsgroup @kostajh Could one of you help update the task description by adding clear steps to reproduce broken titles, and some getting started instructions that might help a new contributor landing on this task (as it has the good first task tag)?

This still happens, you need to have some notification in your system and then set your language to Persian.
The weekday should be something like this:

if you remove display: inline-block from the .mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-primary CSS selector, it would fix it but I'm not sure if it's okay to just drop it.

@Ladsgroup can u temme how to get started with this? and where can i find the source code?

In T227831#5969746, @Vaibhav_apt wrote:

can u temme how to get started with this? and where can i find the source code?

@Vaibhav_apt: Please see the blue "Tags" on this task for hints about the code repository. In this case, it's in mediawiki/extensions/echo in Gerrit. :)

Change #1056257 had a related patch set uploaded (by Seawolf35gerrit; author: Seawolf35gerrit):

[mediawiki/extensions/Echo@master] Echo: Fox for breaking non-latin texts

https://gerrit.wikimedia.org/r/1056257

I can only reproduce this bug in Firefox.

It took me a while to figure out where this occurs, since the screenshots show such small snippets. For anyone else who is confused, it's about the headings on Special:Notifications, which include the day name for notifications within the last week:

en	pl	fa

The problem in the Arabic script is caused by this rule:

.mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-primary::first-letter {
  text-transform: uppercase;
}

Even though the Arabic script has no upper/lower case distinction, that is apparently enough to break text shaping. I did some testing and found that it also breaks ligatures in Latin script, so it's a more general text rendering problem. Test case here:

Chromium	Firefox

It turns out that this is already reported as a Firefox bug (filed by our very own @Aaharoni-WMF in 2017): https://bugzilla.mozilla.org/show_bug.cgi?id=1427032. A similar Chromium bug was fixed in 2019: https://issues.chromium.org/issues/40469450.

The rule you've identified:

.mw-body-content .mw-echo-ui-datedSubGroupListWidget-title-primary {
  display: inline-block;
}

…is required for the ::first-letter selector to work, as it only applies to block elements (https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter).

However, removing these rules would affect the appearance in languages using the Latin script, causing the first letter of day names to not longer be uppercase (but it wouldn't affect English, since the day names in English already start with an uppercase letter). Maybe that's an acceptable design change.

Change #1056257 abandoned by Seawolf35gerrit:

[mediawiki/extensions/Echo@master] Echo: Fox for breaking non-latin texts

https://gerrit.wikimedia.org/r/1056257

The text-transform: uppercase; rule on ::first-letter is not just unnecessary, but actively harmful, and not just in languages written in the Arabic script, but in all languages. Some languages may require a small letter according to their grammar, and forcing a capital letter would be wrong (such things sometimes happen in Irish and in some languages of South Africa and Taiwan, for example).

Are there strong design reasons to force this? If not, just remove it.

Change #1186062 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/Echo@master] Use normal text instead of uppercase for dates on Special:Notifications

https://gerrit.wikimedia.org/r/1186062

Change #1186062 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Use normal text instead of uppercase for dates on Special:Notifications

https://gerrit.wikimedia.org/r/1186062