DIV내의 링크된 긴문자열처리 II

[배우기]

이문제는 본 게시판의
http://www.mozilla.or.kr/community/view ... ird&no=381
에서 논의가 있었습니다.

그런데 DIV영역(quoteblock역시)에서 링크된 문자열이 길경우에 적절하게 다음 라인으로 넘어가지 않는 문제에 대한 글인데,

이러한 경우가 불규칙하다는 것입니다.
우선 아래 링크된 그림을 보시면 A와 B가 동일한 상황에서 다르게 처리가
이루어진다는 것을 아실 수 있을 것입니다.

http://xpz.chinguya.net/forums/data/xpz ... x_bug3.gif
(본게시판에서 HTML사용에 체크를 해도 IMG태그가 먹지를 않는군요.
게시판 담당자께서는 이문제 좀 확인해 주십시오)

이상하지요?

A와 B가 모두 DIV영역 밖으로 나가야 하는데 A는 =에서 다음라인으로
<br />이 되었습니다.

그러나 B의 경우는 그대로 벗어나고 있지요.

같은 문서내에서 이러한 현상이 발생합니다. A에서 혹시 공백이 있는지 재차
확인을 했지만, A, B모두 공백인 없고 다만 차이점이라면 A가 B보다 약간
더 길고 한글이 들어간다는 차이밖에 없습니다.

대단히 궁금하군요.

예제로 쓰인 블로그 엔트리:
http://xpz.chinguya.net/EE/index.php/we ... 뺏기지_말고_쓰자/

[빛알갱이]

이상하군요. 두 경우 모두 '줄바꿈' 기회가 있음에도 불구하고 한 경우에는 줄바꿈이 일어나고 다른 경우에는 안 일어나는군요. reduced test case를 만들어서 debug를 해 보아야겠습니다.

[인코딩]

브라우저의 인코딩설정(Western)을 바꾸어보세요.. 아마도 모두 늘어질 것입니다.

인코딩방식에 대해서는 잘 모르기 때문에 뭐라 할 수 없내요..

2바이트 문자의 경우는 Div의 크기에 맞추어 라인브레이크를 걸어주는 것같내요.그러나 Western을 선택하면, 이것도 Div를 벗어납니다.

111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

ㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱㄱ

111111111111111111111111111111111111111111111111111111111111111111111ㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅㅅ

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂㅂ

그리고 긴 URL문제는 <a href="longurl">표시된 URL</a>에서 [표시된 URL]을 스크립트에서 일정길이로 배열로 만들고 <br />하거나 스페이스를 준 뒤 합치는 방법 이외에는 헛수고가 될 것같내요.

브라우저 자체에서 긴 URL문제를 처리해주지 않는 이상 달리 해결책이 없는 것같내요.

[배우기]

인코딩님이 그분(?)... 이름 좀 하나로 통일하시면 휠씬 좋겠습니다.
인코딩 변경과도 다른 현상이 일어나더군요. 그리고 2byte(한글)와 1byte(영문) 처리가 다른 문제도 [인코딩님]과 마찬가지로 확인했습니다.

이게시판과 제블로그는 다른 상황입니다. 여기는 EUC-KR이고 제블로그는 UTF-8이라는 점은 가만해서 생각해 주십시오. 또 DIV속성이 다른 수도 있을 것입니다.

그리고 저는 파이어폭스 옵션설정에서 Languages and Charater Encoding에서 Language = English [en]과 Character Encoding = Unicode(UTF-8)을 사용하며, 이상황에서 테스트 하는 것이므로 참조해 주시기 바랍니다.

1.위에서 제가 A, B의 차이점은 A는 다만 길이 길고 한글이 들어갔다고 했는데 이를 또한번 테스트해서 살펴본 결과 한글이 들어간 경우는 '줄바꿈'이 됩니다.

2. 여기서 '줄바꿈'이 된다는 것은 하이퍼링크가 삽입된 문자열이건 아니건 적절히 '줄바꿈'이 되서 DIV영역밖으로 나가지 않는다는 것입니다.

3. 한글이 없는 경우(Only 영문) 2.처럼 작동되지 않습니다. 따라서 이경우는 2byte냐 1byte냐에 따라 달리 처리가 된다는 것을 [인코딩]님의 말씀에 동조합니다.

4. MS IE6에서는 DIV로 잡은 레이아웃 자체가 어긋나서 흉하게 나타나더군요.

아래 그림을 참조하시고, 한글이 들어간 경우와 아닌 경우 그리고 DIV가 어긋나는 경우를 참조해 보시면 좋겠습니다.
<a href=http://xpz.chinguya.net/forums/data/xpz ... x_bug4.gif
target=_blank>http://xpz.chinguya.net/forums/data/xpz ... x_bug4.gif
</a>

*** 제경우 웹브라우져도 UTF-8, 웹페이지도 UTF-8인 상황을 얘기하는데, 이러한 점에서 다른 분들과 약간의 혼선을 빚어 좀 헷깔리는 듯 합니다.

[빛알갱이님]의 글에서 '줄바꿈'이 될 기회가 있음에도.... 라는 표현을 보니 파이어폭스가 이러한 문자열처리에 대해 처리가 되는 모양입니다.

DIV만으로 디자인된 페이지중에서 제블로그와 같은 경우는 접하실 기회가 아직은 없으실 것입니다.- (하나의 DIV내에서 2컬럼, 2컬럼에서 다시 각각의 컬럼이 연속되는 경우)

아래는 제가 최초로 템플릿을 만들기 위해 설계한 그림입니다.
<a href=http://xpz.chinguya.net/forums/data/xpz ... xpz001.gif
target=_blank>http://xpz.chinguya.net/forums/data/xpz ... xpz001.gif
</a>
현재도 여기서 크게 다르지 않습니다.

파이어폭스에서 테이블 태그없이 자유자유재로 얼마든지 디자인이 가능하겠지요?

[버그질라]

아래 버그질라를 참조하세요.

<a href=http://bugzilla.mozilla.org/show_bug.cgi?id=56652
target=_blank>http://bugzilla.mozilla.org/show_bug.cgi?id=56652
</a>

그리고 이 문제에 대해 [신정식]님에게 보다 자세한 문의를 해보세요.

<a href=http://gregshin.pe.kr/ target=_blank>http://gregshin.pe.kr/</a>

[빛알갱이]

거기는 제 홈페이지 아닌데요

2byte 문자니 1byte 문자니 하는 것은 대단히 낡은 개념이고(낡았을 뿐 아니라 과거 어느 시점에서도 그런 용어는 결코 좋은 용어도 아니었고, 그다지 유용하지도 않았습니다) 이 경우에 아무런 상관이 없습니다.

모질라는 내부적으로 모든 문자를 Unicode로 처리합니다. 줄바꿈도 마찬가지고요. 글자쌍을 이루는 두 글자 사이에 줄바꿈 기회가 있느냐 없느냐는 그 글자가 어떤 식으로 인코드되어 있느냐가 결정하는 것이 아니라 (아래의 예외를 제외하고), 그 글자쌍의 내재적인 특성에 의해 결정됩니다. Latin letter 2개로 이뤄진 문자쌍에서는 줄 바꿈 기회가 없습니다. 라틴 글자를 써서 표기하는 대부분의 언어에서 음절 단위 줄 바꿈은 가능합니다. 그 경우 대개 hyphen을 넣어 주어야 합니다. 하지만, 한글과 달리 라틴 글자를 쓴 경우 음절 경계를 알기 위해서는 언어별 사전이 필요합니다. TeX/LaTeX과 같은 조판 시스템에서는 언어별 사전이 있어서 hyphenation을 해 주지만, 모질라에서는 그것까지 하는 것은 무리입니다. 메일의 스펠 체크 기능도 들어 갔으니 종국적으로 나중에 언어별 hyphenation을 위한 사전이 들어갈 수도 있기는 합니다. 특히, 독일어, 스웨덴어, 헝가리어, 핀란드어 등 언어에서는 긴 단어가 굉장히 많아서 hyphenation이 없으면 지금 URL에 대해 불평하신 것과 같은 문제가 좁은 div나 좁은 표의 컬럼에서 곧잘 생깁니다.

반면에 한글 *음절* 2개로 이뤄진 문자쌍에서는 줄 바꿈 기회가 있습니다.

인코딩을 다르게 했을 때 줄바꿈이 다르게 보이는 까닭은 다음 두 가지 때문입니다.

1. 어떤('모든'이 아니라) 문자쌍에 대해서는 (줄바꿈은 항상 문자쌍에 대해 그 사이에서 줄바꿈이 가능한지 여부를 따져서 이뤄집니다) 모질라가 언어에 따라 다른 규칙을 적용하기 때문입니다.

2. lang/xml:lang을 명시적으로 지정하지 않은 문서인 경우 '꽁수'로 모질라가 문서의 언어를 유추하기 위해 문서의 encoding을 참고하기 때문입니다.

XP 배우기님처럼 UTF-8로 문서를 작성하기는 분은 필히 (그렇지 않은 경우에도 필히) xhtml/xml 문서(나 문서 일부분)의 언어를 명시하셔야 합니다.

[빛알갱이]

> Languages and Charater Encoding에서 Language= English [en]

이것은 하나의 문서가 여러 개의 언어로 존재할 때 어떤 언어로 된 문서를 선호하느냐를 써버에 알리는(Accept-Language를 통해) 역할을 할 뿐 다른 의미가 없습니다. 여기에는 priortized list를 쓸 수 있습니다. 즉, ko, en, fr과 같이 쓰면 한국어를 제일 선호하고, 그 다음에 영어, 그것도 없으면 프랑스어 문서를 보겠다는 뜻입니다.

> Character Encoding = Unicode(UTF-8)

이 설정도 좋은 설정이 아닙니다. UTF-8로 된 문서는 99.9%가 UTF-8이라고 제대로 표시되어 있습니다. 위 설정은 문서를 제공하는 쪽에서 문서 인코딩에 대한 아무런 정보를 주지 않을 ㄸㅒ 어떤 인코딩을 기본으로 '가정'할 것이냐를 결정하는 설정입니다. 한국어 사용자라면 당연히 EUC-KR로 해 놓는 것이 편하겠지요. UTF-8 문서는 제대로 인코딩 정보를 주니까 그 값을 모질라가 따르고 그런 정보가 없을 때에만 위 값을 참조하니까요. 한국어 사용자가 보는 그런 문서의 대부분은 EUC-KR로 되어 있으니까요. UHC로 되어 있는 것도 많지요. 하지만, 그에 대해 걱정할 필요는 없습니다. 모질라에서 내부 처리를 위해 EUC-KR을 유니코드로 변환할 때에는 모질라는 관대하게 EUC-KR이라고 주장하면서 UHC인 경우도 잘 처리해 주니까요.

[빛알갱이]

<a href=http://www.unicode.org/unicode/reports/tr14/
target=_blank>http://www.unicode.org/unicode/reports/tr14/
</a>
<a href=http://bugzilla.mozilla.org/show_bug.cgi?id=206152
target=_blank>http://bugzilla.mozilla.org/show_bug.cgi?id=206152
</a>
<a href=http://www.w3.org/TR/2003/CR-css3-text- ... reak-props
target=_blank>http://www.w3.org/TR/2003/CR-css3-text- ... reak-props
</a>

[빛알갱이]

> 2바이트 문자의 경우는 Div의 크기에 맞추어
> 라인브레이크를 걸어주는 것같내요.그러나
> Western을 선택하면, 이것도 Div를 벗어납니다.

이 경우는 인코딩에 따라 언어를 유추하고, 언어에 따라 다른 규칙을 적용하기 때문에 생긴 현상이 아니었군요. EUC-KR인 문서를 거짓으로 ISO-8859-1이라고 하면 모질라는 한글 음절이나 자모를 한글 음절이나 자모가 아니라 ISO-8859-1이 표시할 수 있는 라틴 글자로 인식합니다. 앞선 글에서 적은 바와 같이 연속하는 두 라틴 글자 사이에는 줄바꿈 기회가 없습니다. 따라서, 줄이 바뀌지 않는 것입니다.

다 잊어 버리시고, 다음만 기억하세요.

줄을 바꿀 수 있느냐 없느냐는 문자열의 *'내재적'*인 특성에 따라 결정하는 것이지, 그 문자열이 어떤 바이트 열로 표현(문자 인코딩)되느냐는 줄 바꿈 여부를 결정할 때 고려하지 않습니다.

[재용]

깜으로 접근했다, 잘못된 이야기를 했군요.. ^^;;;
인코딩 문제는 예전에 메일문제처럼 잘 모르겠내요.. 아직도 아리송..

=====================
라틴계열문자로만 이루어진 긴 문자열의 경우, 무의미한 공백문자를 넣어주는 방법 이외에는 없다는 이야기인 데, 그러자면 개발자가 글입력내용(그것이 라틴계열인 지 아닌지)과 Div폭이나 테이블의 셀넓이를 정확히 알고있어야 한다는 것이내요..

* SPACE ( )
* HORIZONTAL TABULATION ( )
* CARRIAGE RETURN (
)
* LINE FEED (
)

=====================

이곳이 홈페이지라고 하기에는 그렇고,
<a href=http://www.faqs.org/faqs/cultures/korea ... -internet/ target=_blank>http://www.faqs.org/faqs/cultures/korea ... ternet/</a>

신승식님 홈페이지에 [웹저작도구접근성지침]이 올라와있는 데, 신정식님과 신승식님이 형제분인가요? 그쪽에 가끔 글을 쓰시던데.

<a href=http://gregshin.pe.kr/atag10/ target=_blank>http://gregshin.pe.kr/atag10/</a>

[재용]

    * SPACE (&#x0020;)
    * HORIZONTAL TABULATION (&#x0009;)
    * CARRIAGE RETURN (&#x000D;)
    * LINE FEED (&#x000A;)

[빛알갱이]

라틴 글자 두 개 사이에 줄을 바꾸지 못 한다는 것은(그 둘 사이가 음절 경계가 아닌 한) 라틴 글자를 쓰는 이에게는 당연한 얘기입니다. 한글의 경우도 '가나다'에서 'ㄱ'과 'ㅏ' 사이에는 줄을 바꾸지 못 하지만, 'ㅏ'와 'ㄴ' 사이에는 줄을 바꿀 수 있는 것과 같은 이치입니다.

하지만, 한중일 3국의 조판 문화에서는 가끔 라틴 글자를 마치 한글 음절이나 한자처럼 취급해서 음절 경계 여부를 불문하고 줄을 바꾸는 경우도 있습니다. 그래서, CSS3 text module에서 word-break라는 property로 이것을 조절할 수 있도록 했습니다. 하지만, CSS3 text module은 아직 확정된 것이 아니고 모질라의 국제화 개발 인력도 모자라서 모질라에서는 구현되지 않았습니다. MS IE는 이것을 구현했습니다. 이 얘기는 이미 전에도 이곳에 쓴 적이 있습니다. 또, 그때 다음 버그 보고도 했고요.

<a href=http://bugzilla.mozilla.org/show_bug.cgi?id=249159
target=_blank>http://bugzilla.mozilla.org/show_bug.cgi?id=249159
</a>


긴 URL의 경우에......
'/'를 경계로 줄을 바꿀 수 있는 경우가 있는데, 현재 모질라가 UTR #14대신 JIS X 4051을 따르기 때문에 그렇게 하지 않습니다. 그것은 빨리 고쳐야겠지요.

ATAG10 한국어판은 그렇지 않아도 왜 거기에 올렸냐고 제 동생이 묻더군요. WCAG 한국어판이 거기 있으니 그냥 거기에 올렸습니다.

[빛알갱이]

> 긴 URL의 경우에......
> '/'를 경계로 줄을 바꿀 수 있는 경우가 있는데, 현재 모질라가 UTR #14대신 > JIS X 4051을 따르기 때문에 그렇게 하지 않습니다. 그것은 빨리 고쳐야겠지요.

제가 줄 바꿈 관련 코드를 오랫동안 안 봤더니 ... 왜 다음 그림에서 한글이 들어간 경우와 그렇지 않은 경우가 다른지 알았습니다.

<a href=http://xpz.chinguya.net/forums/data/xpz ... x_bug3.gif
target=_blank>http://xpz.chinguya.net/forums/data/xpz ... x_bug3.gif
</a>

두 경우를 다르게 처리합니다. 이게 속도 문제 때문에 그렇게 한 것 같은데, 바꿔야 할 것 같습니다. 속도를 측정해 보고 (profiling) 별 차이가 없다면 모든 경우에 JIS X 4051를 쓰도록 고치도록 해야겠습니다. 물론, 긍극적으로 UTR #14를 쓰드록 해야 합니다.

[배우기]

워우~^^ 개선이 되겠군요. 수고하셨습니다.
제가 목표로했던 테이블태그없이 DIV만으로 웹페이지를 표현해 보자는 것을
달성할 수 있겠습니다.^^

[빛알갱이]

<a href=http://bugzilla.mozilla.org/show_bug.cgi?id=255990
target=_blank>http://bugzilla.mozilla.org/show_bug.cgi?id=255990
</a>
를 보세요.

FF 1.0에서 고쳐지기를 기대하기는 힘들 것입니다. 발표가 얼마 안 남은 시점에서
상당한 규모의 수정 (속도에 큰 영향을 줄 수도 있는)을 집어 넣자고 고집하기 힘드니까요. 1.0 발표 후라도 속도에 큰 영향을 주지 않을 해법을 찾아야지, 문제를 해결할 수 있습니다.

[배우기]

그렇다면 개선되기 전까지는 별달리 방법이 없겠군요.
공백없는 긴문자열 또는 공백없는 URL을 FULL로 나타내야할 경우
모질라 파이어폭스가 적당하게 '줄바꿈'을 해주지 않는다면
정상출력을 해주기 위한 방법으로 포스팅시에 공백없는 긴문자열이나
URL링크일 경우 적당한 곳에다가 공백을 수동으로 넣어주는 방법이
최선이라 생각하고 저는 이방법으로 사용할까 합니다.