[css] css ‘ex’단위의 가치는 무엇입니까?

Program / 글쓴이

( 인기있는 .Net 단위 테스트 라이브러리 인 Xunit 과 혼동하지 마십시오 .)

오늘 지루함 속에 Gmail DOM을 검사하기 시작했습니다 (예, 매우 지루했습니다).

특정 요소의 너비에 대한 흥미로운 사양을 발견하기 전까지는 모든 것이 매우 간단 해 보였습니다. 저명한 Googlites는 희귀 한 ‘ex’유닛을 사용하여 여러 테이블 열을 지정했습니다.

width: 22ex;

처음에 나는 당황 스러웠고 ( “ex ‘는 무엇입니까?”) 다시 나에게 돌아 왔습니다. 몇 년 전 처음 CSS에 대해 배웠을 때 무언가를 기억하는 것 같습니다. CSS3 사양에서 :

[ ex 단위 는] 사용 가능한 첫 번째 글꼴 의 사용 된 x- 높이와 같습니다 . x-height는 종종 소문자 “x”의 높이와 같기 때문에 그렇게 불립니다. 그러나 ‘x’가 포함되지 않은 글꼴에 대해서도 ‘ex’가 정의됩니다.

좋아요. 그러나 나는 실제로 전에 사용하는 것을 본 적이 없습니다 (훨씬 덜 사용했습니다). 나는 ems를 아주 일반적으로 사용하고 그들의 가치를 높이 평가하지만 왜 “ex”인가? em보다 표준 측정이 훨씬 덜하고 유용하지 않습니다.

이 주제에 대해 내가 찾은 몇 페이지 중 하나는 Stephen Poley의 http://www.xs4all.nl/~sbpoley/webmatters/emex.html 입니다. 스티븐은 좋은 지적을하지만 그의 토론은 결론이 나지 않는 것 같습니다.

그래서 내 질문은 : ‘ex’단위가 웹 디자인에 어떤 가치를 제공합니까?

(이 질문은 주관적으로 태그 될 수 있지만, 그 결정은 나보다 더 경험이 많은 SO’er에게 맡길 것입니다.)

답변

텍스트의 소문자 높이와 관련하여 크기를 조정할 때 유용합니다. 예를 들어 다음과 같은 디자인 작업을 상상해보십시오.

대체 텍스트

디자인의 활자체 차원에서 문자의 높이는 나머지 요소와 중요한 공간 관계를 갖습니다. 위의 소스 이미지의 줄은 텍스트의 x 높이를 가리키는 데 도움이되지만 해당 텍스트를 중심으로 디자인 할 때 가이드 라인이있는 위치도 보여줍니다.

Jonathan이 주석에서 지적했듯이 ex는 단순히 em (너비)의 높이 버전입니다.

답변

질문에 답하기 위해 한 가지 용도는 위첨자와 아래 첨자입니다. 예:

sup {
    font-size: 75%;
    height: 0;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    bottom: 1ex;
}

답변

여기서 고려해야 할 또 다른 사항은 사용자가 글꼴 크기를 늘리거나 줄 였을 때 페이지 크기가 조정되는 방식입니다 (아마도 Ctrl + 마우스 휠 (Windows) 사용).

나는 em을 사용했다 .. padding-left : 2 em; padding-right : 2 em;

그리고 ex with padding-bottom : 2 ex; padding-top : 2 ex;

따라서 세로 크기 조정 속성에는 세로 측정 단위를 사용하고 가로 크기 조정 속성에는 가로 측정 단위를 사용합니다.

답변

의 값 CSS의 사양에 그것을 가지고는, 즉 당신이 정말로 요구하는지 무엇인지, 정확히 안에 유닛을 가지고있는 값과 같습니다.

글꼴을 상대적 크기 로 설정할 수 있습니다 .

내 기본 글꼴 크기가 무엇인지 모릅니다. 따라서 웹 디자인을위한 좋은 전략 중 하나는 절대적이 아닌 상대적인 글꼴 크기를 설정하는 것입니다. “10 픽셀”과 같은 고정 된 크기보다는 “보통 크기의 두 배”또는 “보통 크기보다 약간 작음”에 해당합니다.

답변

“단일 / 이중 줄 간격”과 같은 용어는 실제로 em에 의해 측정 된 두 인접 줄 사이의 오프셋을 의미합니다 . 따라서 “이중 줄 간격”은 각 줄의 높이가 2 em 임을 의미합니다 .

따라서 “선”에 비례하는 수직 거리를 지정하려면 em을 사용하십시오. 소문자의 실제 높이를 원하는 경우에만 ex를 사용하십시오. 즉, 훨씬 드문 경우입니다.

업데이트 : 웹 표준은 브라우저가 0.5em을 ex로 사용하거나 글꼴에서 파생되도록 허용합니다.

그러나 글꼴 (OpenType 또는 웹 폰트)에 “x-height”정보를 안정적으로 포함 할 수있는 방법은 없습니다.

따라서 전자의 가능성은 전 유닛을 중복되게 만들고 후자는 발생하는 신뢰할 수있는 수단이 부족합니다. 그리고 둘 중 하나가 가능하다는 사실은 훨씬 덜 신뢰할 수 있습니다.

따라서 나는 전 단위의 가치 부족을 주장합니다.

답변