HTML에서 탭 글자 너비 설정

다음 릴리스에서 코드 단락에서 탭 문자를 사용하는 기능을 개선할 예정입니다. 이 과정에서 얻은 경험을 공유합니다.

HTML에서 다음과 같이 탭 문자를 사용하면

<pre>public static void main(String[] args) {
&#9;System.out.println("Hello World!");
}</pre>

결과는 다음과 같습니다.

그런데 보이는 탭 글자 너비가 너무 넓다는 문제가 있습니다.¹ 이 문제는 CSS tab-size 속성을 사용하면 해결할 수 있습니다. CSS를 다음과 같이 설정하면

pre {
  font-family: Consolas, "Courier New", monospace !important;
  font-size: 13px;
  -moz-tab-size: 4;
  tab-size: 4;
}

결과는 다음과 같습니다.

그러나 다른 많은 CSS 속성처럼 마이크로소프트 인터넷 익스플로러(이하 IE)는 지원하지 않습니다. 아쉽게도 IE까지 지원하려면 탭 글자를 여러 개의 빈 문자열로 바꾸는 방법밖에는 없습니다.