Music lyrics for right-to-left languages are incorrectly aligned to the left

[ebkalderon]

Describe The Bug

The following pages in the Jellyfin Web client (and Jellyfin for Android) incorrectly left-align lyrics for languages right-to-left text, e.g. Arabic and Hebrew:

• https://<host:port>/web/#/lyrics
• https://<host:port>/web/#/details?id=<id>

Additionally, if a given row of lyrics contains a mixture of right-to-left text and Western punctuation (with or without Latin characters present as well), the text becomes completely garbled and difficult to read.

Steps To Reproduce

1. Right-click on any music track within a given music album.
2. Click Edit lyrics in the context menu.
3. Search for and/or upload an LRC file containing right-to-left text.
4. Right-click on the music track and select View lyrics. This navigates to https://<host:port>/web/#/details?id=<id>.
5. See screenshot 1 below.
6. Start playing the track in the music player.
7. Repeat step 4. This navigates to https://<host:port>/web/#/lyrics.
8. See screenshot 2 below.

Expected Behavior

Lyrics should be right-aligned instead of left-aligned, and trailing punctuation should be rendered in the correct text position at the end of the sentence (left edge) rather than at the start of the sentence (right edge).

Additionally, rows of lyrics containing mixed RTL and LTR text should correctly switch text direction within the same sentence. For instance, this incorrectly rendered bi-directional lyric in Jellyfin Web:

should instead be displayed as:

This transformation should occur regardless of the user's selected display language for Jellyfin Web and/or Jellyfin for Android.

Logs

N/A

Screenshots

System (please complete the following information):

• Platform: Linux
• Browser: Firefox 133.03
• Jellyfin Version: 10.10.3
• Jellyfin Web Version: 10.10.3 (b95dad4ba2)
  • NOTE: Bug also present in the latest stable Jellyfin Android client as well.

Additional Context

• Right-to-left mark # Example of use in HTML (Wikipedia)
  • Contains a real-world example of incorrect vs. correct rendering of bi-directional text in a compatible Web browser.