페미위키:개선요청의 토론 주제

Yonghokim의 요약

한국어와 영어에 따라 규칙을 다르게 적용하도록 해서 해결함

html[lang=en] body { … }”, “html[lang=kr] body { … }

Yonghokim (토론기여)

영어 등 알파벳 사용언어 책이나 문서를 보면 문단의 오른쪽 공간 관리를 위해 하이픈(-)을 사용하는 걸 볼 수 있는데요, 몇가지 패턴을 정리해 볼수 있겠습니다:

  1. 무조건 단어가 한 덩어리로 붙어있게 하기
  2. 줄이 바뀌는 지점에서 단어를 자르기
  3. 줄이 바뀌는 지점에서 단어를 자르고 하이픈 추가
  4. 줄이 바뀌는 지점에서 단어를 음절 단위로 자르고 하이픈 추가

보통 별다른 신경을 안 쓰면 1번이 기본 설정으로 작동하는데, 가로로 좁은 공간에서 긴 단어가 걸리면 오른쪽 여백이 엄청 크게 나올때가 있어 미관상 안 좋습니다.

그래서 영어 등 언어에서는 보통 4번을 사용합니다.

한국어는 언어 특성상 한 글자 공간에 한 음절이 들어가기 때문에 단어가 어디에서 잘려나가도 읽는데 문제가 없어 2번을 사용합니다.

한국어 위키백과는 2번을 적용중입니다.

영어 위키백과는 1번을 적용중입니다. 아마 가로공간을 최대로 확보했기 때문에 딱히 단어를 자를 필요를 못 느낀 것 같습니다.

근데 페미위키는 한국어 문서는 1번 적용, 영어 문서(문서가 아니라 단어인가? 이점은 확인 못했습니다) 는 3번이 적용되어있습니다. 웹사이트측에서는 3번/4번 구분을 하나의 옵션으로 지정하고 4번 적용을 브라우저가 알아서 하도록 한 것으로 보이는데, 음절 구분을 전혀 못하고 있습니다. 음절을 잘 자르는 경우도 있지만 대충 둘러보니 includ-ing, provid-ing, consec-utive 등 실패하는 경우도 많습니다. (어도비 제품군도 이런 문제가 있던데 도대체 왜 이걸 해결못하는건지..?)

영어 단어를 음절을 무시하고 자르면 보기 안 좋기 때문에 1번으로 바꾸었으면 좋겠습니다.

아마 CSS 를 통해 하이픈 규칙이 적용되어있을 것 같은데 문단에 해당하는 클래스에 (설마 P 는 아닐테고..) 아래를 추가하면 됩니다.

hyphens: none !important;

그리고 한국어 문서는 1번 보다는 2번이 좀 더 문단 오른쪽이 정돈되어보일텐데요? 언어별로 CSS 를 따로 도입할수 있는지 모르겠지만 한국어는 hyphens:auto, 영어는 hyphens:none 으로 하면 좋겠습니다. 언어별로 선별 적용이 안 될 경우, 둘 다 hyphens:none (상기 패턴 중 1번) 로 통일하구요

Yonghokim (토론기여)

아 CSS 파트가 좀 더 복잡하군요.. hyphens 속성 외에 word-break, overflow-wrap 속성도 있습니다. 대략 보니까

  1. 무조건 단어가 한 덩어리로 붙어있게 하기: 기본 설정
  2. 줄이 바뀌는 지점에서 단어를 자르기: word-break: break-all; hyphens: none;
  3. 줄이 바뀌는 지점에서 단어를 자르고 하이픈 추가: word-break: break-all; hyphen: auto;
  4. 줄이 바뀌는 지점에서 단어를 음절 단위로 자르고 하이픈 추가: 원래대로라면 3번과 마찬가지로 word-break: break-all; hyphes: auto; 를 세팅하면 브라우저가 언어를 인식해서 사전 기반으로 해줘야 하는데 사전 기능이 약한듯

그래서 종합해보면 아래와 같이 했으면 좋겠습니다:

word-break: normal; hyphens: none;

이렇게 하면 영어는 1번, 한국어는 2번으로 표시될 것 같네요

Larodi (토론기여)
낙엽1124 (토론기여)

사실 저는 적어주신 내용을 이해하여야 수정하고 문제가 생기는지 안 생기는지도 볼 텐데 내용이 너무 제게 생소해서 😭 손을 못대고 있습니다 😭😭

일단 페미위키는 다음 규칙이 적용중입니다.

body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

해당 규칙을 추가한 @김지현 님이 아래와 같이 적어주셨습니다.[1]

Use 'word-break: keep-all; overflow-wrap: break-word;'

그래서 아마 기본값은 위와 같이 놔두고, 말씀하신 규칙은 lang=en인 경우에만 추가하면?? 되는 것 같기도 합니다. 혹시 의견을 더 받을 수 있을까요??

이 이슈도 참고해 주세요: https://github.com/femiwiki/femiwiki/issues/274

김지현 (토론기여)

네 언어에따라 다른 처리를 넣어야할것같네요

CSS를 “html[lang=en] body { … }”, “html[lang=kr] body { … }” 이렇게 짜야할 것 같아요

낙엽1124 (토론기여)

패치 적용되었습니다, 확인 후 괜찮으면 이 주제 닫아주세요 😀 @Yonghokim

Yonghokim (토론기여)

좋습니다! Megalia 문서를 보면 영어 단어가 이전처럼 음절 규칙에 맞지 않게 중간에 잘려버리는 현상이 없어졌네요