밑줄이 텍스트 하강 자와 충돌해야합니까?

CSS3의 텍스트 장식 모듈에는 밑줄을 전체 텍스트 아래에 배치해야하는지 여부를 지정 하는 text-underline-position 속성이 포함되어 있습니다.

또는 기준선 바로 아래에서 텍스트 하위 자와 충돌하게합니다.

좋아, 우리는 밑줄이 최후의 수단으로 만 사용되어야하는 방법을 알고 있지만… 만약 당신이 그것을 사용한다면, 가장 일반적인 방법은 무엇입니까? 각 밑줄 스타일의 장단점은 무엇입니까?

가장 흔한 것은 무엇입니까?

글쎄, 일부 타이포 그래퍼들은 밑줄은 모두 함께 피해야 한다고 강조하고 밑줄은 타자기 나 웹의 하이퍼 링크에만 사용하기에 적합하다고 말합니다. 그러나 저는 창의성이 규칙을 창의적인 방식으로 위반할 수있는 기회를 찾는 것이므로이 안내서를 귀하에게 얼마나 많이 제공 할 것인지에 대해 덧붙입니다.

웹에서 기준선 바로 아래에 겹치는 자손이있는 것이 가장 일반적입니다. 그러나 이것은 현재까지 주요 브라우저에서 항상 기본 렌더링 이었기 때문입니다.

타자기에서 밑줄은 내림차순과 겹치지 만 약간 다릅니다. 두 예제 사이에 약간의 차이가 있습니다 ( example ). 하위 루프의 하단 루프 g또는 하단의 리프 p(예 : 세리프 글꼴) 와 같은 하위의 기준선을 보면 바로 밑줄이 있습니다. 자손의 바닥과 "결합"합니다.

장점과 단점

밑줄이 내림차순과 겹치는 이점은 줄 간격 (또는 "선행")에 전혀 영향을 미치지 않는다는 것입니다. 밑줄을 수용하기 위해 줄 사이의 간격을 늘릴 필요는 없습니다.

자손을 완전히 없애는 이점은 중요한 경우 가독성입니다. 그러나 선 사이의 간격을 늘려야한다는 단점이 있습니다. 어쨌든 상황이 많은 줄 간격을 허용한다면, 반드시 그것을 찾으십시오.

웹을 사용하는 경우 밑줄은 하이퍼 링크와 크게 관련되어 있습니다. 따라서 링크의 일부가 아닌 텍스트에는 밑줄을 사용하지 않아야합니다. 굵은 체 , 이탤릭체 또는 모든 대문자를 사용하여 다른 방법으로 의미하는 것을 의미 합니다.

밑줄 친 텍스트는 일반적으로 너무 작아서 그 차이가 독자에게는 존재하지 않는다고 생각합니다. 이것은 디자이너가 신경 수있는 것들 중 하나입니다 많은 약을, 그러나 독자는 결코하지. 내 생각에 그것은 더 문체 선택입니다.

나는 기본적으로 포지셔닝을 선호합니다. 즉 text-decoration-skip: ink;, 현재는 지원되지 않습니다. 나는 두 개의 클래스를 가지고 하위 클래스에 범위를 추가하여 밑줄을 제거하기 위해 갔다. (php를 통해 텍스트를 대체하므로 만들 코드가 많지 않습니다).

오프셋 때문에 테두리 하단 트릭 (또는 하단 속성)을 사용하지 않습니다. 독자들에게는 밑줄의 오프셋 이 다른 것보다 훨씬 더 산만하다는 것을 알았 습니다.

가능한 한 밑줄이 아닌 굵게, 기울임 꼴, 굵은 기울임 꼴 또는 색상 변형으로 전환하려고합니다.

의 설명은text-decoration: underline CSS 2.1 사양은 세부 사항없이, 단지 밑줄로 그 효과를 정의하지만 브라우저는 기준선 아래에 조금 나타나는로 구현합니다. 따라서 종종 내림차순 (및 문자 아래에있는 분음 부호)을 잘라냅니다.

CSS3 텍스트 초안에는 text-underline-position위치가 있지만 브라우저에서 지원하지 않는 것 같습니다. ( css666.com info 에 따르면 IE에서 지원되지만 최소한 IE 9에서는 지원이 속성을 인식 auto하고 초기 값 인 value를 수락하는 것으로 제한되어 있으므로 실제로 지원되지 않습니다.) 업데이트 : 실제로 , IE (버전 6부터)는 약간 더 지원 하지만 실제로는 텍스트 아래에 밑줄을 넣을 수 있습니다 (!).

Scott의 답변과 Joonas의 의견에서 설명한 것처럼 아래쪽 테두리를 사용하여 밑줄을 시뮬레이션 한 다음 "밑줄"스타일을 상당히 잘 제어 할 수 있습니다. 예를 들어 인라인이 아닌 자체적으로 서있는 밑줄이있는 링크에 적합 할 수 있습니다. 밑줄을 포함하는 HTML 크기로 인쇄 된 인쇄물과 같이 밑줄을 긋고 싶은 인라인 텍스트의 경우, 일반적인 CSS 밑줄이 더 낫습니다. 밑줄이 다소 인쇄물의 전통에 해당하기 때문입니다.