Dynamic Word Break!!  크로스브라우징 word-break, word break

사용자 삽입 이미지






우리는 간혼 이렇게 div 나 기타 html document 에서 문자열이 layout 구조를 뚫고 나오는 경우를
종종 봅니다.

IE의 경우에는 css로 이 부분을 유연하게 처리할 수 있습니다. 하지만 기타 다른 브라우저에서는 특별한 해결책이 아직은 없는거 같습니다.



제가 제시하는 해결 방법은 각 문자마다 일정의 띄어쓰기를 넣는 방식입니다.
white space를 일정 간격 혹은 자간 사이에 입력하므로써 브라우저에서 자동으로 Word-Break를 하게 됩니다.

즉 위의 이미지를 보면 div는 width:200px 입니다.
길게 늘여진 aaa.......aaa 문자열 각 사이에 white space인 space 값을 강제적으로 입력해 넣습니다.

aaaaaaa aaaaaaa aaaaaaa aaaaaaa  ....

이런식으로 넣게 되면 브라우저에서는 자동으로 Word-Break 하게 됩니다. 역시 크로스 브라우징도 가능하게 됩니다.   다만 여기에도 문제가 있습니다.

"i'mastudent' 이라는 문장을 입력하였다면 몇자 간격으로 띄어쓰기를 하느냐에 따라서 의미 전달이 달라질 수 있기 때문입니다.  또한 쓸모없이 중간 중간 띄어쓰기가 있다면 유연한 문장이 되지 않거나 보기 싫게 됩니다.

4byte 단위로 쪼갠다면 i'ma stud ent 가 되겠죠.  사실 저렇게 쓰는 사용자들은 거의 없겠죠.
하지만 경우에 따라 제목에 원치 않는 긴 제목을 'ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ' 이렇게 넣는
경우가 있죠. 

여기서 고안해낸것인데요.  중간중간 space값을 넣을때 바로 0px의 문자열을 넣는 것이죠.
aaaaaaa<i style="font-size:0px;"> </i>aaaaaaa<i style="font-size:0px;> </font> .....



이렇게 좀더 쉽게 만들었습니다.

요약
목표 : 크로스브라우징 word-break 이 가능하도록 javascript 동적 컨트롤
문제 : IE에서는 css를 통하여 word-break 가 가능하지만 그외 브라우저에서는 word-break가 되지 않는다.
고안 : div를 뚫거나 기본 layout 을 변형 시키는 긴 문자열에 일정 간경 혹은 word-break할 단위마다
         띄어쓰기를 강제적으로 넣어줄 경우 모든 브라우저에서 어떤 컨트롤 없이 word-break가 이루어진다.
         하지만 강제적인 띄어쓰기(white space)를 넣을 경우 부자연스러운 띄어쓰기로 원 문자열의 의미가
         없어지고 문자열의 규칙적인 띄어쓰기가 보는 사람들에게는 불편할 수 있다.

결론 : word-break를 해야하는 긴 문자열에 강제적으로 띄어쓰기를 입력하되 띄어쓰기할 문자(white space)는         0px 사이즈의 문자열로 한다.


이것은 직접 사용해본 예제입니다. 

document가 onload가 되면 document 에서 name으로 word-break 엘리먼트를 찾아서
한번에 위의 예제처럼 사용하시면 가장 좋을 것 같구요.

그외에 일부분만 word-break해야한다 하면 wordBreak 메서드를 활용해

    '문자열'.wordBreak();

처럼 사용하시는게 좋겠네요.
신고
Posted by Rhio.kim
Ajax 브라우저별 HTTP Connection 에 대한 테스트 및 고찰!!
그동안 Ajax 통신은 Wininet.dll (Window 32 Internet API) 로만 통신을 하는 줄 알았습니다.

FF에서 Ajax 최대 커넥션 및 HTML document component 병렬(parallel Downloads)다운로드 테스트 하다가
알게 되었습니다.

사용자 삽입 이미지







각 Ajax 요청에 따른 서버 모듈은 PHP 입니다.

<?php
  sleep(5);
  echo "{ complete : 'ok' }";
?>

즉 단지 5초 동안 대기 한 후 결과값을 반환합니다.

테스트한 결과에 대해 살펴 보겠습니다.


Internet Explore 의 경우

사용 모듈 wininet.dll 을 사용합니다.
그리고 Max-Connection 개수는 아래의 레지스트리 값을 참고합니다.  따로 레지스트리를 건드리지 않은 상태라면 아래의 dword 의 값은 00000002 입니다.

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings]
  "MaxConnectionsPer1_0Server"=dword:00000002
  "MaxConnectionsPerServer"=dword:00000002

기본 적으로 Ajax 통신은 2개의 커넥션만 가능하게 됩니다.

위의 테스트 할때 커넥션이 몇개 만들어지는지 TCP/IP 커넥션 개수를 보겠습니다.
사용자 삽입 이미지

좌측에서 보는것과 같이
3개의 커넥션이 맺어집니다.

제 레지스트리이에는
00000040 으로 설정되어
있습니다.

16진수로 64개의 커넥션을
허용해 놓은 상태입니다.

그래서 기본적으로 권고하는 2개의 커넥션보다 더 많은 Ajax 요청을 허용하게 됩니다.

Ajax 통신이 완료되면 자동으로 커넥션은 close 됩니다.












이때 과연 어떤 window 모듈을 사용할까요...
사용자 삽입 이미지
좌측에서 보이는 것 처럼 IE에서는 WININET.dll을 사용합니다.















FireFox 의 경우

network.http.max.-persistent-connections-per-server
사용자 삽입 이미지
좌측은 firefox의 config 정보 입니다. IE에서의 레지스트리와 동일한 일을 하는데요.

firefox 의 경우 주소 부분에 "about:config" 라고 입력해서 이동하시면 좌측과 같은 창이 보입니다.  필터 부분에 "network.http.max" 라 입력하시면 IE 의 레지스트리 부분과 유사한 기능을 하는 부분이 보입니다. 위 이미지에서는 파랗게 처리된 부분이 그 부분입니다.

저 같은 경우는 값이 2로 셋팅되어있습니다. 예제 페이지에서는 3개의 Ajax 요청을 합니다.


사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지





























































































위의 이미지 처럼 순차적으로 2개가 완료되고 나면 나머지 1개를 처리하게 됩니다.
당연한 이야기죠..

이어서 과연 Firefox도 Wininet 을 사용하지 않습니다.
사용자 삽입 이미지
mswsock.dll 을 사용해서 Ajax통신을 하게 됩니다.

사실 여기까지만 테스트를 하려고 했으나

혹 Opera 나 Safari 도 궁금할까 해서 간단하게 내부적으로 어떤 모듈을 사용하는지 찾아봤습니다.








Opera의 경우
역시 Opera 도 브라우저에 Config 를 따로 지원합니다. 당연히 브라우저기 때문에 브라우저에 설정 기능이 있어야 하는데.. IE 만 유달리 윈도우 레지스트리에 종속적으로 움직이네요...  별로 싫어집니다..

오페라의 경우도 주소줄에 opera:config 라고 입력하면 뜹니다.
사용자 삽입 이미지
















위의 값 중 Max Connections Server 값입니다. Opera의 경우 기본 값이 8입니다. FF와 같이 동일합니다.

사용자 삽입 이미지
Opera 의 경우도 mswsock.dll 을 사용하여 Ajax 요청을 처리하고 있습니다.














Safari의 경우
Safari 는 Info.plist 파일에 정보를 가지고 있다고 해서 찾아 열어봤지만 어떤 파일인지 찾지 못했습니다.
ㅠ.ㅠ 아무튼 유사한 방식으로 Max Connection 을 설정하고 있습니다.
Safari의 경우도 8정도로 설정되어 있는 것 같습니다. Ajax 요청을 한꺼번에 3개를 요청했는데 이상없이
3개를 동시에 처리 하더군요...

사용자 삽입 이미지
Safari 역시 mswsock.dll 을 사용하여 Ajax 요청을 하는 걸로 들통 났습니다.

















그런데 왜 굳이 IE는 지금 시스템을 고치려 하지 않을 까요?
Window 에서 돌아가는 브라우저들이라 해서 IE는 윈도우 깔면 자동으로 깔리는 임베디드형 어플리케이션이라서 W3C에서 권고한 DOM Standard도 따르지 않고 레지스트리에다가 설정하고 Wininet.dll 을 사용하고

기본 설정이 왜 2여야만 하는지 좀 다른 브라우저하고 표준에 대해서 Standard 에 대해서 논의 해보고 좀 맞추면 안되나?? 
신고
Posted by Rhio.kim
그 동안 ActiveX의 보안상의 문제 (자동실행)등으로 IE에서 ActiveX는 한번의 클릭을 통해서
활성화 된 이후에 사용할 수 있었습니다.

플래쉬도 그랬구요. 기타 Applet, Object, Embed 등
2006년 4월 이후부터 클릭을 통해 활성화 된 이후에 비로소 ActiveX를 제어 컨트롤 할 수 있었는데요.

플래쉬에서는 SWFObject 를 사용하거나 DOM 메서드를 이용해서 document.write 를 통해서 해결하고는 했습니다.  하지만 이제 그렇지 않아도 된다는 소식입니다.

아래 이미지는 그간 이부분에 있었던 타임라인이구요..
사용자 삽입 이미지

2008년 부터는

HTML에 바로 사용하더라도 상관없다고 되어있네요..

다음 버전인 Vista SP1 에서와 XP SP3 에서 적용될 예정이구요.. 2008년 4월 경에는 모든 사용자가
이 문제로 골치 안아파도 된다고 하네요..

어플리케이션 개발에도 레지스트리를 컨트롤 해서 이 부분이 문제가 된다면
FEATURE_ENABLE_ACTIVEX_INACTIVATE_MODE 속성의 DOCHOSTUI flag 값을사용하면 해결할 수 있다고
합니다.
신고
Posted by Rhio.kim

사용자 삽입 이미지


Companion.JS adds the useful Firebug "console" feature to Internet Explorer.

You can use "console.log(), console.debug(), ..." the same way you used it with Firebug.

Not all the functions are implemented so far on the version 0.2. The following functions are not yet implemented :

console.dir, console.trace, console.group, console.groupEnd, console.profile, console.profileEnd

console.log(object[, object, ...])

Logs the message on the console, all arguments joined by space. The first argument may be a string with a "printf"-like format.
Recognized patterns are :

%s String
%d , %i Integer (numeric formatting is not yet supported)
%f Floating point number (numeric formatting is not yet supported)
%o Object hyperlink

console.debug(object[, object, ...])

console.info(object[, object, ...])

console.warn(object[, object, ...])

console.error(object[, object, ...])

Log messages with custom icon depending on the function used.

console.assert(expression[, object, ...])

Test if the expression is true. If so, the info is logged in the console.

console.dirxml(node)

Log the HTML source if the requested node.

console.time(name)

console.timeEnd(name)

Stops a timer created by a call to console.time(name) and writes the time elapsed.

신고
Posted by Rhio.kim