Twitch 스트리머 닉네임이 세로로 표시되는 현상 해결하기
Posted 2019. 10. 5. 15:38, Filed under: 개발Twitch.tv 스트리머의 닉네임이 세로로 표시되는 현상
2019년 10월 5일, Twitch.tv 스트리머의 닉네임이 세로로 표시되는 현상이 발생하고 있다.
큰 문제는 아닌만큼 금방 수정되겠지만 보기 영 거슬린다면 아래와 같은 방법으로 고칠 수 있다.
문제 해결 방법
1. Stylish 설치
Stylish 는 웹사이트에 유저가
커스텀한 스타일시트(css) 를 덮어씌우는 브라우저 확장기능이다. Stylish 를 이용하면 twitch.tv 에 맞게
개발된 유저스타일을 덮어씌워 문제가 발생하지 않도록 레이아웃을 수정하는 것이 가능하다.
먼저 아래의 링크에서 자신의 브라우저에 맞는 Stylish 확장기능을 설치하여야 한다.
2. 문제를 고치기 위한 UserStyle 설치 (Twitch.tv fix streamer's display name nowrap)
앞에서 Stylish 확장기능을 설치하였다면, 아래의 링크로 접속하여 Install Style 버튼을 눌러주면 된다.
혹은 아래의 내용을 직접 twitch.tv 의 새 유저스타일로 추가해주면 된다.
div.channel-header .tw-mg-l-05.tw-sm-mg-l-1.tw-visible {
white-space: nowrap;
}
div.channel-header p.tw-font-size-5 {
white-space: nowrap;
}
.tw-nowrap {
white-space: nowrap;
}설치를 완료하면 아래의 그림처럼 깔끔하게 나온다.
한국어 언어에서만 스트리머 닉네임이 세로로 표시되는 이유
이 문제는 스트리머 닉네임이 영어라면 발생하지 않는 현상이다. 왜 한국어 언어에서만 이런 문제가 발생하는 것일까? 이유는 브라우저에서 텍스트의 줄바꿈에 대한 규칙이 언어별로 다르다는 것을 고려하지 않았기 때문이다.
텍스트가 표시되는 영역의 가로 넓이(width) 보다 텍스트의 길이가 긴 경우 줄바꿈이 일어난다. 이 때 영어와 같은 non-CJK 언어는 공백(space) 에서 줄바꿈이 일어나고, CJK 언어(Chinese, Japanese, Korean)는 음절 단위로 줄바꿈이 일어나는 것이 기본 룰이다.
영어의 경우 스트리머 닉네임(display name) 에는 공백이 허용되지 않으므로 줄바꿈이 일어날 부분(=공백)이 없어 한 줄로 제대로 표시된다. 하지만 한국어의 경우 음절 단위로 줄바꿈이 발생하므로 음절 단위로 줄바꿈이 일어나 세로로 길게 표시되게 된다.
물론 텍스트가 표시되는 영역이 텍스트 길이보다 넓었다면 줄바꿈은 일어나지 않았겠으나, 스트리머 닉네임이 표시되는 영역의 가로 넓이나 display와 관련된 스타일이 제대로 정해지지 않아서 이런 문제가 발생하게 되었다. 따라서 이 영역의 사이즈에 여유를 주거나, CSS 에 word-break 속성을 수정하여 줄바꿈 규칙을 변경하거나, white-space: nowrap 속성을 줘서 줄바꿈이 아예 일어나지 않도록 하면 해결된다. 예전에 생
방
송 문구가 세로로 표시되는 문제도 이런 이유에서 발생했던 것이었다.
현재는 이름이 표시되는 부분의 element 에 tw-nowrap 이라는 class 명은 붙어있지만, tw-nowrap 에 해당하는 스타일(CSS)이 사라져버려서 이런 문제가 발생하고 있다. 지운 이유는 모르겠지만 만약 영어 언어에서만 개발하고 테스트했다면 해당 스타일을 지워도 아무 문제가 발생하지 않을 것이기에 그냥 지워버렸을 수도 있을 것 같다. 역시 주석없는 코드는 있어도 이유없는 코드는 없는 것이다.
