Jellyfin Web 客户端中右向左语言歌词对齐问题分析与解决方案

在多媒体管理平台Jellyfin的Web客户端中，存在一个影响阿拉伯语、希伯来语等右向左（RTL）书写系统歌词显示的排版问题。这类语言的文字在歌词界面中不仅出现左对齐错误，当混合西文标点符号时还会导致文本方向混乱，严重影响可读性。

问题现象分析

通过开发者工具检查DOM结构发现，歌词容器的HTML元素缺失关键的文本方向属性。对于RTL语言，HTML5规范要求通过dir="rtl"属性显式声明文本方向。当前实现中，歌词容器默认采用左对齐（LTR）布局，导致：

1. 整体对齐异常：RTL文本被强制左对齐，违背语言书写规范
2. 混合文本乱序：当歌词行包含RTL字符与LTR标点（如括号、问号）时，浏览器无法正确应用Unicode双向算法
3. 标点位置错乱：西文标点错误地出现在文本开头而非结尾

技术原理探究

现代浏览器通过CSS的direction属性和HTML的dir属性实现双向文本支持。对于混合书写系统的正确处理需要：

1. 基础方向声明：容器元素必须设置dir="rtl"建立段落级方向
2. 隔离控制字符：使用Unicode的LRM（Left-to-Right Mark）和RLM（Right-to-Left Mark）标记局部文本方向
3. CSS排版支持：配合text-align: start/end等逻辑属性替代具体的左右对齐

解决方案实现

通过为歌词容器元素添加dir="rtl"属性即可修复核心问题：

<div class="lyrics-container" dir="rtl">
  <!-- 歌词内容 -->
</div>

该方案具有以下优势：

• 保持原有CSS结构不变
• 兼容所有现代浏览器
• 不影响LTR语言的正常显示
• 自动处理混合文本的排版

延伸优化建议

对于更完善的国际化支持，建议：

1. 自动检测机制：根据歌词文本的首个强方向字符自动设置dir属性
2. 标点符号处理：对混合文本中的西文标点应用CSS的unicode-bidi: isolate
3. 响应式布局：结合CSS逻辑属性确保不同语言下的对齐一致性

该修复已通过GitHub提交并合并到主分支，将在后续版本中发布。对于终端用户，临时解决方案可通过浏览器开发者工具手动添加dir属性实现即时修正。