CSS를 써서 옛 한글의 강조점 찍어주기

CSS 댓글 달기

최근 공식 배포된 iOS 5.1에서와 마찬가지로 차기 OS X 10.8 Mountain Lion의 기본 한국어 시스템 서체로 ‘애플 산돌 고딕 네오(AppleSDGothicNeo)’가 추가되었다는 소식은 이미 널리 알려진 사실이다. 그동안 애증의 대상이었던 AppleGothic 글꼴의 새로운 대안으로 떠오르면서 많은 사람이 반가움을 표시하고 있는 상황.

그런데 새로 추가된 글꼴도 비스듬히 누운 이탤릭 스타일을 제대로 표시해주지 못한다는 얘기는 또 아쉬울 수밖에 없다. 비록 이탤릭 스타일로 표시된 한글이 영문 글꼴의 멋스러운 형태를 보일 순 없더라도, 가령 <em> 태그 속에 표시된 한글이 그저 시스템이 일률적으로 눕혀놓아서 밋밋하게 표현된다면 이 또한 차별의 느낌을 지울 수가 없는 것이다.

그렇다면 웹에서라도 예전 한글 고문서에서나 볼 수 있었던 성조를 나타내는 기호인 방점을 흉내 내서 강조점의 형태로 표시해주면 어떨까 하는 생각이 들었다. (물론 강조점으로 굳이 방점을 빌려 와 쓸 필요는 없고 적당한 기호를 선택해서 쓰면 된다.)

오로지 CSS만 써서 표현해 보려 했으나, 아쉽게도 CSS에서 쓸 수 있는 Pseudo Elements 중에 ::every-letter와 같은 것은 존재하지 않기 때문에 JavaScript의 힘을 빌려 jQuery plugin인 Lettering.js를 사용했다.

우선 기본적으로 강조점을 넣고 싶은 elements에 다음과 같이 적당한 class만 지정해주면 된다.

<em class="dot">강조점</em>

여기에 jQuery와 Lettering.js 소스만 페이지에 추가하고 다음처럼 DOM이 준비되는 순간 해당 elements에 .lettering() method를 실행하면 된다.

$(document).ready(function() {
  $(".dot").lettering();
});

이렇게 하면 해당 elements는 다음과 같은 구조를 갖게 된다.

<em class="dot"><span class="char1">강</span><span class="char2">조</span><span class="char3">점</span></em>

글자마다 부여된 .char1, .char2, .char3… class를 가진 elements에다가 강조점을 표시하는 스타일만 지정해주면 되는데, 모든 char로 시작하는 class가 지정된 elements는 CSS Attribute selectors를 사용 한꺼번에 선택한다. 여기에 :after pseudo elements의 content property로 점 표시용 특수 문자(&middot;)만 붙여 넣고 적당한 위치로 조종해준다.

em.dot span[class^="char"] {
  position: relative;
  font-style: normal;
  text-shadow: 1px 1px 2px #ccc;
}
em.dot span[class^="char"]:after {
  position: absolute;
  content: "\00B7";
  top: -.65em;
  left: .4em;
}

주의할 점은, CSS Content property로 특수 문자를 집어넣을 땐 꼭 escaped hexadecimal Unicode character 값을 지정해 줘야 한다는 것. 그리고 위에 있는 em elements처럼 간단한 구조를 가진 경우라면 Attribute selectors를 써줄 필요도 없을 것이다.

여기에 사용된 점 기호의 HTML Entity Decimal code points 값은 183이고 이에 대응하는 escaped hexadecimal Unicode character 값은 \00B7인데 이런 건 Unicode Code Converter를 써서 쉽게 변환할 수 있다.

이렇게 해서 완성한 CSS로 강조점을 찍어놓은 것의 예시 페이지.

한편, 웹 브라우저의 CSS Generated content 지원 상황을 보면 IE6, IE7을 제외하고 모두 지원하고 있으며, 미지원 브라우저라고 해도 그저 추가적인 시각적 스타일을 표시해 줄 수 없을 뿐이기에 콘텐츠 접근성 면에서 큰 문제가 없다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요