Нумерованные и маркированные списки RTL не работают

Пример из реальной жизни: ההנחיות בוויקי לגבי שמות - ישראל (Israel) - OpenStreetMap Community Forum

Этот раздел должен быть нумерованным, но не является — предположительно из-за проблем с CSS.

Отрисовка немного отличается на настольных компьютерах, но всё равно сломана.

Я попробую продемонстрировать это здесь тоже. Не знаю, зависит ли это от настроек форума. Приведённые ниже списки идентичны на английском и иврите.

Нумерованный:

  1. Один
  2. Два
    1. Два точка один
    2. Два точка два
    3. Два точка три
  3. Три
    • Три маркер один
    • Три маркер два

Маркированный:

  • Маркер один
  • Маркер два
    1. Маркер два номер один
    2. Маркер два номер два
  • Маркер три
    • Маркер три маркер один
    • Маркер три маркер два

Нумерованный:

  1. Одна
  2. Две
    1. Две точка одна
    2. Две точка две
    3. Две точка три
  3. Три
    • Три пункт одна
    • Три пункт две

Пункты:

  • Пункт одна
  • Пункт две
    1. Пункт две номер одна
    2. Пункт две номер две
  • Пункт три
    • Пункт три пункт одна
    • Пункт три пункт две

Судя по предпросмотру — да, здесь тоже сломано. (Редактирование: ниже добавлен скриншот)

2 лайка

Предлагаемое исправление:

1 лайк

Спасибо, надеюсь, это примут! Я также открыл запрос на применение этого патча непосредственно к форуму OSM: Fix list CSS for RTL languages - This forum issues and requests - OpenStreetMap Community Forum

P.S. Похоже, что оригинальный пост автора темы был автоматически переведён для меня на английский, и я не могу найти способ увидеть оригинал в мобильном интерфейсе. Что там происходит? Очевидно, что в данном случае проблема больше не видна. Хорошо, что я успел сделать скриншот раньше!

Это может быть верно, Уди, но я думаю, что это правило касается только предпросмотра. Возможно, часть этого — даже ошибка в используемом нами CSS-реверсере.

@Osama, есть ли у тебя какие-то мысли по этому поводу?

Я уверен, что мы сможем это исправить, поставив этот баг в приоритет.

Полное правило (см. строку #92) выглядит так:

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

Следовательно, оно применяется и к .cooked (а не только к превью).

Это может быть ошибкой в реверсере, но в дальнейшем свойства start и end являются лучшим решением.

Уди

1 лайк

Конечно, я объединил. Дайте знать, как это работает?

Отлично!

1 лайк

Скорее всего, реверсивер применяется только тогда, когда язык интерфейса установлен на иврит, арабский и т. д., но в данном случае это не так. Текст с направлением справа налево (RTL) может встречаться в содержимом даже при левостороннем (LTR) языке интерфейса. Как отметил Уди, в стилях часто предпочтительнее использовать -inline-start и -inline-end вместо -left и -right, избегая подверженного ошибкам реверсивера. Это обеспечит корректную работу как для встроенного RTL-текста (в содержимом постов), так и для макета с направлением RTL (на основе выбранного языка интерфейса), используя всего один файл стилей. Возможно, стоит рассмотреть возможность перехода на этот подход и отказа от rtlcss. Однако, если реальной проблемы нет, это не обязательно.

1 лайк

Да, я согласен, нам определенно нужен надежный CSS-стили для смешанного контента. Если вы встретите другие примеры, требующие улучшения, то pull request будет очень кстати :hugs:

1 лайк

@nat, отличная идея добавить тег. Возможно, стоит добавить его и здесь: Wrong -> arrow direction in RTL text contexts (по какой-то причине я не могу его отредактировать). Я опубликую там в этой теме немного релевантной информации через секунду (но если коротко, это всё ещё гораздо более масштабная задача, чем необходимо, и то, что я написал в первом посте, остаётся верным).

1 лайк

Я немного поиграл с этим ИИ-артефактом, чтобы разобраться в этих вещах:

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

Кажется, нам предстоит внести длинный список изменений и соблюдать множество паттернов, чтобы стать более дружелюбными к RTL.

Это интересная тема для разбора и объяснения людям. Также очень интересна работа с границами.

1 лайк

Рад, что вам это интересно! Мне тоже :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 лайк

Вот вопросы, которые меня сейчас волнуют:

  • Возможно ли привести наш CSS в такое состояние, чтобы утилита rtlcss больше не требовалась?
  • Стоит ли это того?
  • Существует ли здоровое промежуточное состояние?

Как ни странно, эта страница демонстрирует ещё одну распространённую проблему с перемешанными направлениями — прокрутку в неправильную сторону:

К сожалению, я никогда не углублялся в это, поэтому не могу сказать, что вызывает такую проблему и как её избежать.

1 лайк

Возможно — безусловно, но, возможно, потребуется несколько правок в HTML для согласования с CSS (я могу привести примеры позже).

Здоровое промежуточное состояние — я предполагаю, что если вы измените только некоторые свойства на -inline-start, то rtlcss проигнорирует их, но продолжит преобразовывать -left. Это означает, что вы можете постепенно переключать всё больше и больше свойств, пока rtlcss перестанет что-либо изменять. В этот момент rtlcss можно будет отключить.

Стоит ли это того — не знаю. Подумайте, сделает ли это Discourse более стабильным в RTL-режиме и будет ли его проще поддерживать в долгосрочной перспективе. Честно говоря, я не знаю.

Это определённо стоит того — возможно, даже необходимо — для CSS, применяемого к пользовательскому контенту, который может быть как слева направо, так и справа налево (обычно с атрибутом dir="auto").

Кроме того, хотя прямо сейчас я не могу вспомнить пример, иногда вам действительно нужно явно задать свойство left для чего-либо независимо от направления макета. В таких случаях rtlcss сделает не то, если вы каким-то образом не создадите для этого исключений.

1 лайк

Вот пример: Fix display of RTL tag and role values in element info table by jake-low · Pull Request #790 · OSMCha/osmcha-frontend · GitHub

Дополнительные элементы <span> внутри элементов <td> необходимы для того, чтобы таблица отображалась в нужной раскладке. В контексте RTL псевдоэлемент ::before располагается справа, поэтому, если сам td был бы RTL, то знак =, разделяющий ключ и значение, оказался бы в самом конце (справа) строки таблицы.

В сущности, иногда нужно вложить дополнительный элемент, чтобы задать ему направление, отличное от направления родительского элемента. Но это может быть и хорошим решением, в зависимости от вашей точки зрения.

2 лайка

Я не думаю, что стоит прилагать усилия для полной переработки нашего CSS в ядре, плагинах и темах только ради того, чтобы избавиться от зависимости от rtlcss. Здоровым промежуточным шагом может стать использование CSS, не зависящего от направления, для областей, содержащих сгенерированный пользователями контент, такой как сообщения и биографии, а для всего остального rtlcss отлично справится со своей задачей.

3 лайка

Эта тема была автоматически закрыта через 14 часов. Новые ответы больше не принимаются.