RTL 번호 또는 불릿 목록이 깨집니다

실제 사례: ההנחיות בוויקי לגבי שמות - ישראל (Israel) - OpenStreetMap Community Forum

이 섹션은 번호가 매겨져야 하지만 그렇지 않습니다 - 아마도 잘못된 CSS 때문일 것입니다.

데스크톱에서 렌더링은 약간 다르지만 여전히 깨져 있습니다.

여기서도 시연해 보겠습니다. 포럼 설정에 따라 달라지는지 모르겠습니다. 다음 목록은 영어와 히브리어에서 동일합니다.

번호 매김:

  1. 하나
    1. 둘 점 하나
    2. 둘 점 둘
    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. 이 스레드의 원저자(OP) 글이 제 모바일 UI에서 자동으로 영어로 번역되어 있는 것 같고, 원래 글을 볼 방법을 찾을 수 없습니다. 무슨 일이 일어나고 있는 건가요? 당연히 이 경우에는 문제가 더 이상 보이지 않습니다. 다행히도 전에 그 스크린샷을 찍어 두었네요!

Udi, 맞을 수도 있지만, 그 규칙은 미리보기에 관한 것뿐이라고 생각합니다. 이 중 일부는 우리가 사용하는 CSS 리버서(CSS revereser)의 버그일 수도 있습니다.

@Osama 이 부분에 대해 어떤 생각들이 있으신가요?

이 버그를 우선시하여 해결할 수 있을 것이라고 확신합니다.

완전한 규칙(92행 보기)는 다음과 같습니다:

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

따라서 .cooked에도 적용됩니다(미리보기에만 적용되는 것이 아닙니다).

이는 리버서(reverser)의 버그일 수 있지만, 앞으로는 startend 속성이 최선의 해결책입니다.

Udi

1개의 좋아요

네, 병합했습니다. 잘 되는지 알려주세요.

좋아요!

1개의 좋아요

리버서(reverser)는 UI 언어가 히브리어/아랍어 등으로 설정된 경우에만 적용되는 것 같고, 여기서는 해당 사항이 아닙니다. UI 언어가 LTR로 설정되어 있더라도 콘텐츠 안에 RTL 텍스트가 나타날 수 있습니다.

우디가 언급했듯이, 스타일시트에서는 오류가 발생하기 쉬운 리버서를 사용하지 않고 -inline-start/end-left/right 대신 사용하는 것이 종종 더 바람직합니다. 이렇게 하면 단일 스타일시트로 임베디드 RTL(게시물 콘텐츠 내)과 레이아웃 RTL(선택된 UI 언어 기반) 모두에서 올바르게 동작합니다. rtlcss를 폐기하고 해당 방식으로 마이그레이션하는 것을 고려해 볼 수 있습니다. 물론 해결해야 할 실질적인 문제가 없다면 그렇게 하지 않아도 됩니다.

1개의 좋아요

네, 동의합니다. 혼합 콘텐츠에 사용할 수 있는 안정적인 CSS 스타일시트가 꼭 필요해요. 개선이 필요한 다른 예시를 발견하시면 PR을 환영합니다 :hugs:

1개의 좋아요

@nat 태그를 추가하는 건 좋은 아이디어네요. 여기에도 추가하면 좋을 것 같습니다: Wrong -> arrow direction in RTL text contexts (어떤 이유인지 모르겠지만 제가 편집할 수 없습니다). 잠시 후 해당 스레드에 관련 정보를 몇 가지 올리겠습니다 (요약하자면, 여전히 필요한 것보다 훨씬 큰 작업이고, 제가 OP에서 쓴 내용은 여전히 정확합니다).

1개의 좋아요

이 AI 아티팩트를 가지고 이것저것 해보면서 관련 내용을 공부하고 있습니다:

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

더 RTL 친화적으로 만들려면 적용해야 할 변경 사항과 패턴이 꽤 긴 목록으로 보였습니다.

이것을 풀어서 사람들에게 알려주는 것이 흥미로운 작업이 될 것입니다. 경계(border) 관련 내용도 매우 흥미롭습니다.

1개의 좋아요

흥미있다고 말씀해 주셔서 기쁩니다! 저도 그렇습니다 :slight_smile:

제가 아는 한, -top-bottom은 문제없습니다. -block-start-block-end가 각각 해당 값으로 매핑되지 않는 경우는 매우 드물며, 이는 Top-To-Bottom 레이아웃을 사용할 때만 발생할 수 있습니다. 저는 그런 레이아웃에 대한 경험이 전혀 없고, 그러한 레이아웃을 수용하려면 웹사이트 전체를 다시 디자인해야 할 것 같아서, 이런 단순한 CSS 조정만으로는 부족할 것 같습니다. 하지만 제 말이 틀렸을 수도 있으니, 제 말만 믿지 마세요!

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

1개의 좋아요

여기서 내가 고민하는 질문들은 다음과 같습니다:

  • rtlcss가 더 이상 실행될 필요가 없는 상태로 CSS를 만들 수 있을까요?
  • 그 가치가 있을까요?
  • 건강한 중간 상태는 있을까요?

재미있는 것은, 이 페이지가 혼합 방향성(mixed directions)과 관련된 또 다른 일반적인 문제인 잘못된 방향의 스크롤링을 보여준다는 점입니다:

불행히도 저는 이 문제에 대해 자세히 살펴본 적이 없어 원인이 무엇인지, 어떻게 피할 수 있는지 말씀드릴 수 없습니다.

1개의 좋아요

가능성은 - 물론이지만, CSS와 협력하기 위해 HTML에 몇 가지 조정이 필요할 수 있습니다 (나중에 예를 들어볼 수 있습니다).

건강한 중간 상태 - 일부 항목만 -inline-start로 변경하면, rtlcss는 그것들을 무시하고 -left 변환은 계속할 것으로 예상합니다. 이는 rtlcss가 더 이상 아무것도 변경하지 않을 때까지 점점 더 많은 항목을 전환할 수 있음을 의미합니다. 그 시점에 rtlcss는 폐기할 수 있습니다.

그렇게 할 가치가 있는가 - 모르겠습니다. 이것이 Discourse의 RTL 안정성을 높일지, 그리고 장기적으로 유지보수가 더 쉬워질지 고려해 보십시오. 정말로 모릅니다.

확실히 가치가 있는 경우 - 양쪽으로 갈 수 있는 사용자 생성 콘텐츠(보통 dir="auto" 사용)에 적용되는 CSS에는 - 아마도 필수적일 것입니다.

또한, 머릿속에 떠오르는 예는 없지만, 레이아웃 방향과 관계없이 특정 항목의 left 속성을 명시적으로 설정하고 싶은 경우가 실제로 있습니다. 그러한 경우, 어떤 식으로든 예외를 만들지 않는 한 rtlcss는 잘못된 작업을 수행하게 됩니다.

1개의 좋아요

예시입니다: Fix display of RTL tag and role values in element info table - Pull Request #790 - OSMCha/osmcha-frontend - GitHub

<td> 요소 내부의 추가적인 <span> 요소는 테이블이 원하는 레이아웃으로 렌더링되도록 하는 데 필요합니다. RTL(오른쪽에서 왼쪽으로) 컨텍스트에서 ::before 의사 요소는 오른쪽에 위치하므로, td 자체도 RTL이라면 키와 값을 구분하는 = 기호가 테이블 행의 가장 끝(오른쪽)에 위치하게 됩니다.

기본적으로 부모 요소와 다른 방향을 지정하기 위해 추가 요소를 중첩해야 하는 경우가 있습니다. 하지만 관점에 따라 이는 좋은 일이 될 수도 있습니다.

2개의 좋아요

핵심, 플러그인, 테마 전체의 CSS를 업데이트하여 rtlcss에 대한 의존성을 완전히 제거하는 데는 상당한 노력이 필요하므로 그만한 가치가 없다고 생각합니다. 건강한 중간 단계로는 게시물이나 자기소개서와 같이 사용자가 생성한 콘텐츠를 포함하는 영역에 방향성과 무관한 CSS를 사용하는 것이 좋겠습니다. 나머지 영역은 rtlcss가 역할을 수행할 것입니다.

3개의 좋아요

이 주제는 14시간 후 자동으로 닫혔습니다. 이제 더 이상 답변을 남길 수 없습니다.