css 'ex'단위의 가치는 무엇입니까?

87

( 인기있는 .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에게 맡길 것입니다.)

css specifications units-of-measurement

— 조엘
소스

124

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

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

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

— 렉스 M
소스

29

추가하기

— 만하면

3

@Joel 주어진 글꼴에 대해 m의 너비와 x의 높이 사이의 비율은 얼마입니까? 고정되어 있더라도 모든 글꼴은 m과 x 사이의 비율이 다르고 임의적이기 때문에 계산하기가 매우 어려울 수 있습니다. 따라서 유형에 상대적이어야하는 요소를 디자인 할 때 비율을 직접 결정하는 대신 x- 높이를 사용하여 비율을 유지할 수 있습니다.

— Rex M

2

상당히 난해한 또 다른 요점은 Mozilla Gecko 에 따르면 ems를 사용하는 것보다 exe를 사용하여 항목을 조금 더 정확하게 확장 할 수 있다는 것입니다. em의 기본 "스타일이 지정되지 않은"크기는 10.06667px이고 ex의 크기는 6px입니다. 이것은 ems를 스케일링 할 때 Firefox가 exe를 스케일링 할 때보 다 더 자주 부분 픽셀을 반올림해야 함을 의미합니다.

— benrifkah 2011 년

1

일반적으로 정확하지는 않지만 2ex가 1em과 크기가 거의 같다고 상상하는 것이 타당합니다 (대문자의 높이는 일반적으로 1em보다 다소 작습니다). CSS 사양에는 "x 높이를 결정하는 것이 불가능하거나 비현실적인 경우 0.5em 값을 가정해야합니다."라고 명시되어 있습니다.

— natevw

20

@JonathanFingland @RexM 인쇄 타이포그래피와 달리 CSS에서 em단위 는 너비를 측정 하지 않고 글꼴 의 높이 를 측정합니다 . 1 em은 계산 된 font-size값 이며 font-size"원하는 글리프 높이"를 지정합니다 . 모두 지금 em과 ex높이를 측정한다. ( ch그러나 너비는 측정합니다.)

— Rory O'Kane 2013-09-11

19

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

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

— jbs
소스

1

나는 그것이 "ex"가 무엇인지 설명하는 데 정말로 도움이되지 않는다고 생각한다.

— duskwuff -inactive- 2014

11

질문은 " 'ex'단위가 웹 디자인에 어떤 가치를 제공합니까?"입니다. "전 제품이란 무엇입니까?"가 아닙니다. Joel은 원래 질문에서 전 단위를 정의하는 작업을 매우 잘 수행합니다. 위첨자를 배치하는 데 사용하는 방법에 대한 실용적인 예를 제공합니다.

— jbs 2014 년

1

질문에 직접 답하는 좋은 실용적인 예입니다. 잘 했어.

— Basil Bourque 2014

2

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

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

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

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

5

em과 ex는 각각 대문자 "M"과 소문자 "x" 의 높이 로 정의되기 때문에 수직 단위 입니다. 수직 및 수평 길이 모두에 사용할 수 있습니다.

— JacquesB

여기에 ch0 숫자 ( "0")의 너비를 측정하는 가로 단위입니다.

— Matt F.

1

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

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

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

— 암브로스 채플
소스

동의합니다. 그러나 em 사양이 이것에 충분하고 더 안정적이지 않습니까?

— Joel

@JoelPotter 예, 그러나 너비 에만 해당됩니다 . 높이의 ex경우는 동등한 것 같습니다.

— ANeves은 SE입니다 생각하는 악

5

@ANeves 올바르지 않습니다. CSS에서 em은 너비가 아니라 글꼴 의 높이 (대략) 입니다. 인쇄 타이포그래피에서 em의 개념은 대문자 너비에서 비롯되었습니다 . 그러나 CSS는 . Wikipedia를 참조하십시오 . Mem

— Basil Bourque 2014

2

너비를 원하면 ch다른 답변에 언급 된 단위를 사용하십시오 .

— Basil Bourque 2014

1

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

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

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

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

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

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

— Yì Yáng
소스

이 질문은 그 의미가 아니라 그 가치를 구체적으로 요구합니다.

— Matt F.