✈ CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last

2014년에 작성했던 글입니다. 블로그를 옮기는 중이라... 쿨럭

text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다.

더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-;

군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다.

그러면서 단어는 음절단위에서 개행하지 않게 해 달란다.

아하~

나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다.

그분들의 갈증을 해소해드리고자, 브라우저별로 속성 값이 어떻게 적용되는지를 일일이 브라우저마다 돌려서 캡처 떠서 한 이미지로 만들어 두었다.

결론부터 말하자면, IE6~8까지만 적용되고, 나머지 모든 브라우저에서는 안된다.

IE8에서는 모든 속성이 다 안 먹고 유일하게 distribute-all-lines 만 적용된다.

이마저도 9에서는 적용되지 않는다.

IE6,7에서는 inter-cluster, kashida, newspaper, distribute-all-lines 만 적용된다.

text-align:jusitify의 취지는 여러 줄이 넘어갈 때 만 양쪽 정렬을 한다.

한 줄이 완전히 다 차지 않은 경우에는 양쪽 정렬을 하지 않으며, 한 줄이 다 차지 않아도 양쪽 정렬을 하고자 할 때에는 distribute-all-lines을 적용한다.

<style>

.text-01 { width:304px; border:2px solid #06F; padding:10px;font-size:14px; text-align:justify;text-justify:auto;}

.text-02 { width:304px; border:2px solid #077817; padding:10px; font-size:14px; text-align:justify;text-justify:inter-word;}

.text-03 { width:304px; border:2px solid #603; padding:10px; font-size:14px; text-align:justify;text-justify:inter-ideograph;}

.text-04 { width:304px; border:2px solid #CC0; padding:10px; font-size:14px; text-align:justify;text-justify:inter-cluster;}

.text-05 { width:304px; border:2px solid #F99; padding:10px; font-size:14px; text-align:justify;text-justify:distribute;}

.text-06 { width:304px; border:2px solid #ff3333; padding:10px; font-size:14px; text-align:justify;text-justify:kashida;}

.text-07 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:newspaper}

.text-08 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:distribute-all-lines}

.text-09 { width:304px; border:2px solid #AA0004; padding:10px; font-size:14px; text-align:justify;text-justify:distribute-center-last}

</style>

<div class="text-01"> 

<p>text-justify:auto;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 .</p>

</div>

<div class="text-02">

<p> text-justify:inter-word;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-03">

<p> text-justify:inter-ideograph;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-04">

<p> text-justify:inter-cluster;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-05">

<p> text-justify:distribute;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-06">

<p> text-justify:kashida;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-07">

<p> text-justify:newspaper;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-08">

<p> text-justify:distribute-all-lines;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

<div class="text-09">

<p> text-justify:distribute-center-last;<br />I don't even try to control you. Look into my eyes and I'll own you. 

<br />I've got the moves like jagger.<br />I've got the moves like jagger.</p>

<p> 난 너를 통제하려고 조차 안하는데 . 나의눈을 봐 , 그럼 난 널 갖게되지 . <br /> 난 Jagger 와 같이 움직이지 .<br /> 난 Jagger 와 같이 움직이지 . </p>

</div>

text-justify:auto;
I don't even try to control you. Look into my eyes and I'll own you.
I've got the moves like jagger.
I've got the moves like jagger.