Typography
상세 본문·원문 미리보기의 긴 글 조판 래퍼.
- 출시 화면에서 사용
개요
미리보기
A quiet space for reading
Records stay exactly as they were read from your connected sources. You can redo the organization at any time. scope=week
Separate content from style
- Lead with what matters.
- Open originals from the detail view. How to connect a source
A good screen is read before it is explained.
Long URL: https://calendar.google.com/calendar/u/0/r/week/2024/10/07
예시
상태
문서
A quiet space for reading
Records stay exactly as they were read from your connected sources. You can redo the organization at any time.
scope=weekSeparate content from style
- Lead with what matters.
- Open originals from the detail view. How to connect a source
A good screen is read before it is explained.
Long URL: https://calendar.google.com/calendar/u/0/r/week/2024/10/07
촘촘하게
A quiet space for reading
Records stay exactly as they were read from your connected sources. You can redo the organization at any time.
scope=weekSeparate content from style
- Lead with what matters.
- Open originals from the detail view. How to connect a source
A good screen is read before it is explained.
Long URL: https://calendar.google.com/calendar/u/0/r/week/2024/10/07
이렇게 · 이렇게 하지 않기
- 이렇게 상세 본문과 원문 미리보기처럼 긴 글에만 감싼다. 여러 언어가 섞인 원문은 단락마다 lang을 유지한다. 원문의 서식을 꾸미거나 고쳐 쓰지 않는다.
- 이렇게 내용(HTML)과 스타일을 나눈다. 안쪽에서 컴포넌트 대신 시맨틱 태그를 쓴다.
- 이렇게 하지 않기 정화하지 않은 원문 HTML을 넣지 않는다.
- 이렇게 하지 않기 화면 레이아웃에 쓰지 않는다. 긴 글 전용이다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
density? | 'prose' | 'compact' | prose | prose는 문서, compact는 상세 패널 안 원문 미리보기. |
children | ReactNode | — | h2–h6, p, ul/ol, a, code, blockquote, hr. 원문 HTML은 정화(sanitize)한 것만 넣는다. 미리보기는 표본 문서. |
| 그 밖의 속성 | — | — | id, lang, dir, aria-* 등 네이티브 div 속성은 그대로 전달된다. 원문 미리보기면 lang 또는 dir="auto". className·style은 받지 않는다. |
접근성
키보드: 안쪽 링크만 Tab 정지점이다.
- 제목 단계는 페이지 계층에 맞춰 h2부터 시작한다.
- 긴 URL은 overflow-wrap:anywhere로 줄을 바꿔 320px에서 넘치지 않는다.