W3C의 Internationalization Core Working Group에서 Internationalization Best Practices: Specifying Language in XHTML & HTML Content라는 제목의 문서를 새로 갱신해서 올려놓았다.

이 문서는 HTML 문서 내용을 다루는 저자나 프로그램 개발자들에게 세계 각국 언어에 맞는 현지화를 위한 일종의 안내서로 사용될 수 있도록 관련 권고 사항들을 전해주고 있다.
문서 내용을 요약하면 먼저 HTML 문서에 사용 언어를 선언할 때 주의할 사항으로 character encoding과 글이 읽히는 방향(direction of text)을 언어 선언과 혼동해서 쓰지 말라고 경고하고 있다. Character encoding 값과 사용 언어는 일대일로 바로 적용될 수가 없는데, 그 이유로 어떤 하나의 인코딩 값이 여러 다양한 언어를 대표할 수도 있기 때문이다. 글이 읽히는 방향도 한 언어 안에서 문서 내의 문맥에 따라 서로 다른 방향으로 읽히고 해석되어야 할 필요가 생길 수도 있고, 대표 언어를 선언하는 것만으로는 이런 상황을 제대로 표현해 줄 수가 없게 된다.

위 문서에는 웹 브라우저나 화면 해독기와 같은 user agents가 문서에 쓰인 언어를 올바로 해석할 수 있게 하려고 (X)HTML 문서 안에 사용 언어를 선언해 주는 대표적 방법들을 다음과 같이 소개하고 있다.

첫 번째 방법으로는 XHTML 요소에 langxml:lang 속성을 사용하는 방법으로, 문서 전체의 언어를 지정할 땐 html 태그에 정의해 준다. 물론 문서 안에 포함된 특정 요소에 다른 언어가 사용되었을 땐 해당 요소에 따로 적당한 언어 속성을 지정해 줄 수도 있다.

<!-- 보기 1: text/html mime type으로 전달되는 XHTML 1.0 문서 안에 언어 속성을 사용해서 선언해 준 예.-->
<html lang="ko" xml:lang="ko" xmlns"http://www.w3.org/1999/xhtml">

여기서 주의할 것은, HTML일 경우 lang 속성만 사용되며, XML로 전달되는 XHTML의 경우에는 xml:lang 속성만 사용한다.

두 번째 방법은 아래처럼 meta 요소의 http-equiv를 Content-Language로 지정해 주는 방법이 있다.

<!-- 보기 2: meta 요소의 Content-Language 선언. -->
<meta http-equiv="Content-Language" content="ko" />

여기서 문서에 사용된 언어와 의도된 독자의 사용 언어가 여럿일 경우 각 언어를 모두 나열해 줄 수도 있지만, 문서의 언어 해석을 위한 용도로는 적절치 않거니와 아직 이곳에 지정된 정보의 이용 상황은 극히 낮은 수준이다.

마지막으로, 언어 해석 정보는 문서와 함께 전달되는 HTTP header에서도 얻을 수 있는데, 이것도 대부분의 웹 브라우저들은 문서의 올바른 언어 해석을 위해서 이 곳의 정보를 참고하지는 않고 있다.

결과적으로, 지금까지는 첫 번째로 소개된 html 언어 속성을 이용한 방법이 HTML 문서의 언어 해석을 위해 가장 일관성 있고 효과적인 방법이라 할 수 있다.

추가 참고 문서: W3C I18N FAQ: Why use the language attribute?

아래는 웹 문서에서 많이 쓰이는 대표적인 활자들과 그들의 올바른 HTML entities 표기이다.

  • “ 큰 시작 따옴표 &#8220;
  • ” 큰 마침 따옴표 &#8221;
  • ‘ 작은 시작 따옴표 &#8216;
  • ’ 작은 마침 따옴표 &#8217;
  • – 반각 대시 기호(en dash) &#8211;
  • — 전각 대시 기호(em dash) &#8212;
  • − 빼기 &#8722;
  • × 곱하기 &times;
  • … 말 줄임표 &#8230;

웹에서의 활자 표시는 종이 인쇄 역사 보다 훨씬 짧은 이유로 제대로 된 활자를 표현하는 데는 비교적 더 많은 제약을 받지만, 그것이 불가능한 것도 아니고 단지 아직 잘 알려지지 않았을 뿐이다.
(여기서는 WordPress의 콩나물 따옴표 문제로 설치했던 Unfancy Quote Plugin 때문에 따옴표들이 밋밋하게 표시된다.)

참고 글:

여러 JavaScript Library들 중에서 최근에 와서야 발견했지만 아주 마음에 드는 놈인 jQuery의 이모저모를 맛보고 있는데, 마침 TextMate 용 jQuery Bundle이 제공되고 있어서 바로 설치해서 사용하고 있다.

그런데, 사용하다 보니 jQuery bundle에 정의되어 있는 snippet들은 HTML 문서에서는 바로 사용할 수 없다는 사실을 알게 되었다. 실험 목적으로 HTML 문서에 바로 JavaScript를 삽입해서 쓸 경우에는 이 점이 무척 아쉬운 부분이다.
하지만, 해결책은 바로 옆에 있었다.

TextMate의 Languages Bundle Editor를 열고 HTML bundle을 선택한 후에, 다음과 같은 코드를 HTML의 기본 pattern이 정의되어 있는 부분(16 번째 줄 부터 시작 됨)에 추가해 주면 된다.

{   name = 'source.js.jquery.embedded.html';
    begin = '(?:^\\s+)?(<)((?i:script))\\b(?![^>]*/>)';
    end = '(?<=</(script|SCRIPT))(>)(?:\\s*\\n)?';
    patterns = ( { include = 'source.js.jquery'; } );
},

TextMate을 재실행하면, HTML bundle이 적용된 환경에서도 바로 jQuery snippet들을 불러와서 사용할 수 있게 된다. 🙂
jQuery bundle의 다음 버전에서는 아마도 위와 같은 추가 설정 작업이 필요 없도록 수정될 모양이다.

추가: Getting jQuery bundle to work within script tags embedded in HTML

아무 준비없이 그냥 뛰어든다면 그 코드는 물론 무참히 깨지고 말 것이다. 그렇기 때문에 항상 코드 속 HTML entities들과 겹치는 부분은 웹 상에서도 그대로 보여지도록 알맞게 고쳐주어야 한다. 악명 놓은 놈들로 >, &, <가 있지.

물론 간편하게 웹 상에서 준비 작업을 해줄 수도 있겠지만, 한글 사용에 약간 문제가 있고 서버와의 연결은 필수 조건이다.

단순한 작업이지만 매번 번거로워서 Dashboard 용 widget으로 만들게 되었다.

웹에 뛰어든 코드 위젯(widget)의 그림

이름을, 약간 우습지만, 웹에 뛰어든 코드(Code Postable)로 지었는데, Dashcode Beta에서 탄생한 첫 위젯이지만 만드는 작업이 꽤 순조로웠기에 앞으로 발표될 정식 버전이 기대된다.

그나저나, 정작 위젯 1순위 후보에서 탈락한 온라인 문법/철자검사기가 utf-8를 지원해주면 좋으련만 아쉽군… 🙁

과거 Yahoo!의 User Interface Engineer이기도 했던 Dustin Diaz씨가 얼마 전 공개한 네 번째 스크린캐스트(screencast)를 보면 TextMate가 웹 개발에 사용되는 한 단면을 엿볼 수가 있다.

그런데, 여기서 눈에 띄는 것 중에 하나는 TextMate가 기본적으로 제공하는 snippts 중에는 없는 것으로 기본 밑바탕의 HTML 문서를 만들 때 그가 사용했던 page로 지정된 tab trigger snippet. TextMate에서 사용되는 snippet이란 일정 길이의 글 단락을 문서에 삽입할 수 있는 기능을 제공하고 있는데, 이놈이 아주 유용한 이유는 삽입된 글 단락 안에서 tab 키를 이용해서 순차적으로 특정 위치로 이동할 수 있도록 지정해 줄 수도 있고, 삽입될 단락 중에 특정 부분을 변수로 지정해 놓고서 삽입된 후에 tab 키로 이동해서 상황에 맞게 수정해 줄 수도 있다.

쓸모가 많을 것 같아서 하나 만들어 볼까 하는 중에, 반갑게도 바로 그가 사용했던 Textmate의 “page” snippet을 공개해 주었다.

당장 그대로 추가하고 보니, 몇 가지 XHTML 1.0 Strict Doctype에 안어울리는 것이 있어서 입맛대로 약간 수정해 보았다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ${1:${2:xml:lang="ko"}${3: lang="ko"}} dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="${4:application/xhtml+xml}; charset=utf-8" />
    <title>${5:Title}</title>
    ${6:<link rel="stylesheet" href="${7:css/blueprint/}screen.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="$7print.css" type="text/css" media="print" />
    <!--[if IE]><link rel="stylesheet" href="$7ie.css" type="text/css" media="screen, projection"><![endif]-->
    }<style type="text/css" media="screen">
    /* <![CDATA[ */
      
    /* ]]> */
    </style> 
    ${8:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    }<script type="text/javascript">
    // <![CDATA[ 
      $0
    // ]]> 
    </script> 
  </head>
  <body id="${9:page}">
    <div class="container">
      ${10:<div class="span-${11:24}">
        <h1>${12:Header}</h1>
      </div>
      <div class="span-${13:20}">
        ${14:Main content}
      </div>
      <div class="span-${15:4} last">
        ${16:Right sidebar}
      </div>
      ${17:<div class="span-24">
        ${18:Footer}
      </div>}}
    </div>
  </body>
</html>

XHTML 문서에 포함된 inline style sheet가 적용되려면, link tag으로 삽입된 style sheet 뒤에 위치해야 해서 자리를 옮겼고, script tag에 빠져있는 type 요소도 추가해 주었다. 물론, XHTML 문서에 맞는 MIME type도 기본적으로 application/xhtml+xml로 지정되도록 바꾸었으며, CSS와 JavaScript를 감싸주는 HTML 주석(comments) 기호도 XHTML 문서에서 올바로 인식되도록 고쳐주었다.
마지막으로, 애용하는 JavaScript Library들 중의 하나인 jQuery를 불러오는 단락도 추가함.