본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[워드프레스] 크롬, Twenty Twelve 테마에서 :(콜론) 표시 문제 해결 – text-rendering: optimizeLegibility

워드프레스의 새 기본 테마인 Twenty Twelve 테마는 멋지다. Minimalism이라고나 할까.

근데 크롬에서 한글에 :표시가 되는 문제가 있다. 아래 이미지 참고.

이걸 해결하려면, wp-content/themes/twentytwelve/style.css 파일을 열어서 아래 코드를 찾는다. 484번째 줄이다.

body {
  font-size: 14px;
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  /* text-rendering: optimizeLegibility; */
  color: #444;
}

그리고 위에 표시된 것처럼 text-rendering: optimizeLegibility; 앞뒤로 /**/를 넣어서 주석 처리를 한다. (아니면 그냥 그 줄을 지우면 된다.) 그러면 더이상 콜론이 생기지 않는다.

text-rendering: optimizeLegibility

text-rendering: optimizeLegibility라는 CSS 속성은 비표준 속성인데, 크롬과 파폭에서 지원한다. Legibility는 가독성이란 뜻이다. 즉, 텍스트를 렌더링할 때 가독성을 최적화해서 렌더링하라는 속성이다. 이 옵션을 줬을 때 영어에서 결과물은 아래와 같다. Live Example 표에서 3번째 줄과 4번째 줄을 비교하면 어떤 차이가 생기는지 알 수 있다.

영어 YoW의 간격이 읽기 좋게 조정되는 걸 볼 수 있다.

그런데 한글에서는 이런 게 없고, 굴림체에서는 이상한 현상만 발생하게 되는 거다. 그나마 IE에서는 이 속성 자체를 지원하지 않으니까 아무 이상이 안 생기는 거고, 크롬에서는 이 속성을 지원하는데 뭔가 버그가 있으니까 문제가 생기는 것이다. (파폭은 이 속성을 지원하지만, :이 생기지 않는다.)

이상이다.

참고

이 글은 ‘Twenty Twelve 테마에서 한글이 이상하게 보일때 (콜론(:)이 생길 때)’Mozilla 개발자 네트워크 : text-rendering을 참고해서 썼다.

 

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (3개)

Leave a Reply

Your email address will not be published. Required fields are marked *