<wbr>, word break opportunity, HTML5
개발을 하다보면, 예상치 못한 error에 직면하게 된다.
내가 만든 logic의 문제라기보다는, 사용하고 있는 3rd party component의 문제일때, 대안을 찾아야한다.
아무리 돈을 주고 구매한 component라 할지라도, bug를 report 하고, 이를 검증해서 bug list에 등록된다 하더라도, 바로 fix해서 update 해줄리 만무하기 때문이다.
특히나 외국 회사에서 만든 component일 경우에는 세월아 네월아, 마냥 기다릴수 밖에 없는 처지가 된다.
오늘은 <wbr> tag가 문제였다.
Reporting component가 HTML5를 제대로 지원하지않는다.
그래서, 가끔 지원하지않는 tag를 포함한 data가 column에 mapping될 경우, error가 빡~ 발생한다.
몇천 글자로 구성된 column에서 error 유발 원인 문자를 찾아내기란, 정말 누구도 하고 싶지 않을 일일 것이다.
그런데, 어쩌리요.
HTML tag pair가 혹시 안맞는 것인지, 전체를 tag 계층별로 한눈에 보이도록 맞추는 작업부터 해야한다.
무슨 노가다냐 싶다.
정리가 된 HTML을 HTML validator 에 넣어 정상적인지를 확인해본다.
어, 정상이다.
이러면 더 골치가 아프게 된다.
정상인데, 그럼 component가 지원을 안하는 tag가 포함된 것이로군.
그럼, 대안은?
사용된 tag가 무엇이냐에 따라 결정해야한다.
불필요하면 data를 database에서 UPDATE 해서 제거한다.
또는, 적절한 tag로 data를 database에서 UPDATE 한다.
그리고, 추후 또 이런 data가 저장될 수 있으므로, 저장할때 미리 error가 발생하지않도록 data를 modify 해서 저장되도록 code를 변경한다.
<wbr>은 HTML5에 추가된 element중 하나이다.
단어가 너무 길때, page width에 따라 아무데서나 line break 되지않도록, 또는 줄바꿈이 되지않아서 제대로 보이지않게 될수 있을 때, 의미가 잘 전달될 수 있게 미리 break 되어야하는 위치를 표시하는데 사용된다고 한다.
<br />은 무조건 줄바꿈을 하게 하지만, <wbr>은 브라우저가 내용을 분석한 후, 필요할 때만 이 tag 위치에서 줄바꿈을 한다.
다음과 같은 문장이 있다고 하자.
마지막 "directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis" 은 하나의 word로 취급된다.
너무 길다보니, 웹브라우저의 너비가 좁아지면, 중간에서 의미와 상관없이 wrapping(줄바꿈) 되어 line break이 발생하거나, wrapping이 안되어서 내용이 제대로 안보일 수 있다.
<p>You will find the file you need by going to directory/subdirectory/deeper/and/deeper/down/the/rabbit/hole/hereitis.</p>
그래서, 미리 sub directory 의 폴더 단위로 line break이 되도록 <wbr>을 사용할 수 있다.
<p>You will find the file you need by going to directory<wbr>/subdirectory<wbr>/deeper<wbr>/and<wbr>/deeper<wbr>/down<wbr>/the<wbr>/rabbit<wbr>/hole<wbr>/hereitis.</p>
다른 일 하고 싶어~ 하다가도,
새로운 문제에 봉착해서, 해결하면서 지식을 쌓아가게 될때는 또 보람도 되고, 재미도 있고...
이래서 계속 이 개발 업무를 하는 것같다.