본문 바로가기
Dev

[CSS] 보노보노급 줄바꿈 문제를 해결하자

by ryush00 2017. 4. 16.

최근 PPT를 제작중인데, 너무 단조로우면 이상하니까 보노보노를 첨가하기로 했다.


가독성이 지옥급으로 내려가며 정말 안 어울리는 보노보노. 이 보노보노에 필적할 만한 만행이 하나 더 있다.






애플마저도...





영문 버전으로만 크기가 맞춰져 있어서 발생하는 줄바꿈 문제이다. 영문 버전으로 볼 때는 깔끔하게 출력되지만, 그 이외의 버전으로 볼 때에는 이런 일이 벌어진다. 혹은, 컴퓨터 버전에서는 안 밀리고 잘 표시되는데, 모바일에서는 줄바꿈이 이상하게 적용되는 경우도 종종 보인다.


다람쥐 헌 쳇바퀴에 타고파!


(직접 창 사이즈를 조절해가며 확인해보자)


물론 일반인들은 별 신경 안 쓰겠지만, 이런거에 민감한 사람은 정말 미쳐버릴지도 모른다.


완벽한 해결책은 없다. 현지화 과정을 거치면서 디자이너가 하나하나 이런 문제가 없는지 확인해 보아야 한다. 언어별로 글씨 폭은 다 다르니까 말이다. (뭔가 가변 폭 비슷한게 있을지도..)


그나마 웹 버전에서 가독성을 높이는 방법이 하나 있긴 하다. CSS의 work-break 속성을 keep-all로 설정해 주면 된다. 아래를 보면, 줄 바꿈을 단어별로 함으로써 가독성이 나아진 걸 알 수 있다. 


다람쥐 헌 쳇바퀴에 타고파!


옆에 빈 공간이 생기긴 하지만 글씨 읽는건 훨씬 낫다. 간단한 해결 방법이다.




One more thing...




한글로 문서 만들때도 띄어쓰기가 이상하게 적용되는 경우가 많다. 제발 이런 경우는 피하자. 제발. 왼쪽 정렬을 하면 이런 참사를 막을 수 있다.



댓글