MathText
수식이 섞인 글을 그린다. 서버가 미리 그려 둔 수식(SVG)을 글자 사이에 끼워 넣고, 없으면 읽을 수 있는 글자로 대신 보여 준다.
- 분류
- 학습 콘텐츠
- 가져오기
import { MathText } from '@/ui/MathText'- 코드 위치
apps/mobile/src/ui/MathText.tsx:21
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 문제, 보기, 해설, 개념처럼 수식이 들어갈 수 있는 모든 글에
AppText대신 쓴다. ____(밑줄 네 개)를 빈칸으로 바꾸려면blank에 요소를 넘긴다.- 강조(굵게), 밑줄, 표시(형광펜) 표식이 있는 글은
segments로 넘긴다.
쓰지 않는다
- 수식이 없는 평범한 라벨에는 쓰지 않는다.
AppText를 쓴다. - 수식을 이미지로 따로 만들어 넣지 않는다. 글자 크기 설정을 따르지 않게 된다.
종류#
| 이름 | 설명 |
|---|---|
| 미리 그린 수식 | segments가 있으면 수식은 SVG다. 크기는 글자 크기를 따르고, 글자의 x-높이(크기의 절반)에 맞춰 그려진다. |
| 글자만 | segments가 없으면 $…$의 달러 기호를 빼고 읽을 수 있는 글자로 보여 준다. |
| 표식 | b 굵게, u 시험지식 밑줄, hl 단어 뒤 옅은 형광 표시. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 글자 스타일 | `variant`(기본 `body`) | 수식은 시스템 글자 크기(최대 1.6배)와 앱 글자 크기 배율을 함께 따라 커진다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 빈칸 | blank가 있고 글에 ____가 있으면 그 자리에 요소를 넣는다. |
| 긴 문장 | 단어 단위로 나뉘어 수식 둘레에서도 줄바꿈이 된다. 한국어 단어는 중간에서 끊기지 않는다. |
사용 방법#
기본
기본
import { MathText } from '@/ui/MathText';
<MathText text={question.text} segments={question.render?.text} variant="question" />빈칸
빈칸
<MathText text="x = ____ 일 때 값은 0이다." blank={<View style={styles.blank} />} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
text | string | — | 필수 | 글. 수식은 $…$로 쓴다. |
segments | Segment[] | null | — | 선택 | 서버가 미리 그린 조각 목록({ t: "text", v } 또는 { t: "math", svg, w, h, va, tex }). 있으면 text보다 우선한다. |
variant | TextVariant | 'body' | 선택 | 글자 스타일. 기본 "body". |
color | string | palette.text | 선택 | 글자 색. 기본 color.text. |
style | TextStyle | — | 선택 | 추가 글자 스타일. |
blank | ReactElement | — | 선택 | ____ 자리에 넣을 요소. |
치수와 토큰#
- 수식 크기
- 글자 크기 × (시스템 배율, 최대 1.6) × (앱 배율). 1ex = 크기 × 0.5
- 표식
- 굵게 = Bold, 밑줄 = 시험지식 밑줄, 표시 = 단어 뒤 옅은 배경
- 글자 폴백
$x^2$→x^2(달러 기호 제거)
접근성#
- 수식은 그림이지만 원문(
tex)이 읽을 수 있는 글자로 보존된다. 접근성 이름에는 글자 폴백을 쓴다. - 글자 크기 설정과 시스템 설정에 따라 커지므로 부모의 높이를 고정하지 않는다.
글자 색 대비
글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.
| 쓰임 | 글자색 | 바탕 | 대비 | 기준 |
|---|---|---|---|---|
| 본문 | text | surface | 17.15:1 통과15.25:1 통과16.13:1 통과10.92:1 통과 | 4.5:1 (작은 글자) |
잘한 예와 잘못한 예#
이차식 x2 + 2x + 1 의 값을 인수분해로 구하시오.
수식이 사진으로 들어간 문제