RTL编号或项目符号列表中断

错误
1

真实世界示例：ההנחיות בוויקי לגבי שמות - ישראל (Israel) - OpenStreetMap Community Forum

本节应编号，但未编号——可能由于 CSS 错误。

此图像显示了来自 OpenStreetMap 社区论坛的 zstadler 的帖子截图，其中一个红圈圈住了希伯来语文本，文本部分可见于圆圈中。（由 AI 标注）
此图像显示了来自 OpenStreetMap 社区论坛的 zstadler 的帖子截图，其中一个红圈圈住了希伯来语文本，文本部分可见于圆圈中。（由 AI 标注）1080×2096 140 KB

桌面上的渲染效果略有不同，但仍然是错误的。

我也将在此处尝试演示。我不知道这是否取决于论坛设置。以下列表在英语和希伯来语中是相同的。

编号：

  1. One
  2. Two
    1. Two point one
    2. Two point two
    3. Two point three
  3. Three
    • Three bullet one
    • Three bullet two

项目符号：

  • Bullet one
  • Bullet two
    1. Bullet two number one
    2. Bullet two number two
  • Bullet three
    • Bullet three bullet one
    • Bullet three bullet two

ממוספר:

  1. אחת
  2. שתיים
    1. שתיים נקודה אחת
    2. שתיים נקודה שתיים
    3. שתיים נקודה שלוש
  3. שלוש
    • שלוש פריט אחת
    • שלוש פריט שתיים

פריטים:

  • פריט אחת
  • פריט שתיים
    1. פריט שתיים מספר אחת
    2. פריט שתיים מספר שתיים
  • פריט שלוש
    • פריט שלוש פריט אחת
    • פריט שלוש פריט שתיים

根据预览——是的，这里也错了。（编辑：下面添加了截图）

截图显示了上面用希伯来语列出的列表，如撰写本文时在 Firefox 移动版上渲染的效果。仅可见文本，但数字和项目符号不可见，子列表与顶层列表处于同一级别。
截图显示了上面用希伯来语列出的列表，如撰写本文时在 Firefox 移动版上渲染的效果。仅可见文本，但数字和项目符号不可见，子列表与顶层列表处于同一级别。1080×1382 126 KB

2 个赞
2

建议修复：

1 个赞
3

谢谢，希望这能被接受！我也在 OSM 论坛上就此补丁提交了一个请求：Fix list CSS for RTL languages - This forum issues and requests - OpenStreetMap Community Forum

附注：似乎这个帖子的 OP 被自动翻译成英文给我看了，我在移动 UI 上找不到查看原文的方法。那里发生了什么？显然，在这种情况下问题不再可见。幸好我之前截了图！

4

这可能是正确的 Udi，但我认为该规则仅与预览有关。其中一些甚至可能是我们使用的 CSS 反向器中的一个错误。

@Osama 对此有什么看法？

我相信我们能够解决这个问题，并将优先处理此错误。

5

完整的规则（参见第 92 行）是：

.cooked,
.d-editor-preview {
  ul,
  ol {
     ...
  }
}

因此，它也适用于 .cooked（而不仅仅是预览）。

这可能是反向器中的一个错误，但今后，start 和 end 属性是最佳解决方案。

Udi

1 个赞
6

当然，我已经合并了，告诉我效果怎么样？

7

太棒了！

OP 中希伯来语部分的屏幕截图，现已正确呈现。
OP 中希伯来语部分的屏幕截图，现已正确呈现。1080×1366 141 KB

1 个赞
8

我猜反转器（reverser）只有在界面语言设置为希伯来语/阿拉伯语等时才会应用，实际上并非如此。在内容中，即使界面语言是从左到右（LTR），也可能会出现从右到左（RTL）的文本。

正如Udi提到的，通常更好在样式表中使用-inline-start/end而不是-left/right，并且避免使用易出错的反转器。这将正确处理嵌入式RTL（在帖子内容中）以及布局RTL（基于所选界面语言），只需使用一个样式表。你可能想考虑迁移到这种方式并废弃rtlcss。当然，如果没有真正的问题需要解决，你也不必这样做。

1 个赞
9

是的，我同意，我们应该为混合内容提供一个可靠的 CSS 样式表，如果您发现任何需要改进的其他示例，那么 PR 完全受欢迎 :hugs:

1 个赞
11

@nat 添加标签是个好主意。也许也应该在这里添加：Wrong -> arrow direction in RTL text contexts （我不知道为什么无法编辑）。我稍后会在那个帖子里发布一些相关信息（但简而言之，这仍然比它需要的大得多，而且我最初发帖的内容仍然是正确的）。

1 个赞
12

我一直在玩这个人工智能产物来学习这些东西：

https://meta.discourse.org/discourse-ai/ai-bot/artifacts/248/2

看起来我们需要对大量更改和模式进行调整，才能更好地支持 RTL。

此图像概述了诸如填充、边距、安全区域、位置、左、右、上和下等 CSS 属性，并附有每种属性的说明。（由 AI 题注）
此图像概述了诸如填充、边距、安全区域、位置、左、右、上和下等 CSS 属性，并附有每种属性的说明。（由 AI 题注）1426×1231 110 KB

这是一个有趣的挑战，可以用来教人们这方面的知识。边框的东西也很有趣。

1 个赞
13

很高兴你觉得它有趣！我也这么觉得 :slight_smile:

我想提一下，据我所知，-top 和 -bottom 没问题。-block-start 和 -block-end 映射到它们各自的属性的情况非常罕见，只有在使用从上到下布局时才会发生。我个人完全没有这类布局的经验，而且我认为整个网站可能都需要重新设计才能适应这类布局，所以这些简单的 CSS 调整是行不通的。当然，我也可能弄错，别太当真！

编辑：https://stackoverflow.com/questions/510068/how-do-i-make-text-run-top-to-bottom-in-css#53576895

1 个赞
14

我在这里考虑的问题是：

  • 是否有可能让我们的CSS达到一种状态，不再需要运行rtlcss？
  • 这值得吗？
  • 是否存在一个健康的中间状态？
15

有趣的是，这个页面展示了另一种常见的混合方向问题——滚动方向错误：

不幸的是，我从未研究过这个问题，所以我无法告诉你它是由什么引起的以及如何避免它。

1 个赞
16

是否可能——绝对可能，但这可能需要对 HTML 进行一些调整以配合 CSS（稍后我可以举例说明）。

健康的中间状态——我预计如果你只更改一些 -inline-start 的内容，rtlcss 会忽略它们，但会继续转换 -left。这意味着你可以逐步切换越来越多的内容，直到 rtlcss 不再进行任何更改。到那时就可以弃用 rtlcss 了。

是否值得——一无所知。考虑一下这是否会使 Discourse 在 RTL 布局下更稳定，以及长期维护是否会更容易。我真的不知道。

对于可以双向使用的用户生成内容的 CSS（通常带有 dir="auto"），这样做绝对值得——甚至可能是必需的。

另外，虽然我一时想不出例子，但有时你确实希望明确设置某个元素的 left 属性，而不管布局方向如何。在这种情况下，rtlcss 会出错，除非你以某种方式为这些情况设置了例外。

1 个赞
17

Here’s an example: Fix display of RTL tag and role values in element info table by jake-low · Pull Request #790 · OSMCha/osmcha-frontend · GitHub

The additional <span> elements inside the <td> elements are necessary to make the table render in the desired layout. In an RTL context, the ::before pseudo-element comes at the right, so if the td itself were RTL then the = sign separating the key and value would instead come at the very end (right side) of the table row.

Basically sometimes you need to nest an extra element to give it a separate direction from its parent. But this might be a good thing depending on your perspective.

2 个赞
18

我认为为了消除对 rtlcss 的依赖而全面更新核心、插件和主题中的 CSS 不值得付出努力。一个健康的中间步骤是，对包含用户生成内容的区域（如帖子和简介）使用与方向无关的 CSS，而对于其他所有内容，rtlcss 将完成工作。

3 个赞
19

该主题在14小时后自动关闭。不允许再回复。