Typst CSS

개요

Typst CSS 기능은 CSS 속성을 Typst 속성으로 변환하여 HTML 포맷과 Typst 포맷에서 유사한 스타일을 구현할 수 있게 합니다.

주요 사용 사례는 다음과 같습니다.

테이블 패키지가 스타일링한 HTML 테이블
ANSI 색상 등이 적용된 HTML <pre> 태그 기반 콘솔 출력

이 문서는 다음 독자를 위해 작성되었습니다.

Typst로 변환 가능한 table, pre 출력을 만들고 싶은 패키지 개발자
CSS 속성 변환을 개선하거나 다른 속성 지원을 추가하고 싶은 확장 개발자

Typst CSS의 동작 방식, 기능 on/off 방법, pre 태그 처리, 문제 해결, 변환 필터 추가/변경 방법을 설명합니다.

Typst CSS 동작 방식

테이블 처리를 비활성화하지 않았다면, HTML Raw 블록의 테이블은 Pandoc AST로 파싱된 뒤 출력 포맷에 맞춰 렌더링됩니다.

출력 포맷이 Typst일 경우 Quarto는 juice를 사용해 HTML Raw 블록에 포함된 스타일시트 규칙을 각 요소에 주석으로 붙입니다. 이후 후처리 필터가 HTML 속성과 CSS 속성을 typst:property, typst:text:property 형태로 변환하고, Pandoc Typst writer가 적절히 출력합니다.

동일 방식으로 pre 태그를 처리하도록 설정할 수도 있습니다. 자세한 내용은 pre 태그 처리를 참고하세요.

지원 요소 및 속성

Typst CSS가 지원하는 HTML 요소와 CSS 속성 조합은 다음과 같습니다.

	span	div	table	td
background-color	✓	✓		✓
border¹				✓
color	✓	✓		✓
font-family		✓	✓
font-size		✓	✓
font-style	✓	✓		✓
font-weight	✓	✓		✓
opacity	✓			✓
align²				✓

Typst CSS 비활성화

CSS→Typst Lua 필터는 (테이블이나 pre 태그뿐 아니라) 전체 AST를 대상으로 동작합니다. 문제 해결을 위해 필터를 비활성화하려면 다음 설정을 사용하세요.

format:
  typst:
    css-property-processing: none

`pre` 태그 처리

pre 태그 처리는 ANSI를 HTML을 거쳐 Typst로 자동 변환하기 위한 기능입니다. Quarto는 현재 실행 결과에서 ANSI를 자동으로 캡처하지 않지만, 패키지나 확장에서 이 기능을 활용할 수 있습니다.

pre 태그 처리를 사용하려면 HTML Raw 블록을 감싸는 div에 html-pre-tag-processing="parse" 속성을 지정하세요.

::: {html-pre-tag-processing="parse"}

```{=html}
<pre>...</pre>
```
:::

문제 해결

패키지가 Typst CSS로 변환 가능한 HTML 테이블을 출력하는지 확인하려면 keep-md: true로 렌더링한 후 .typst.md 파일에서 다음과 같은 HTML Raw 블록을 찾으세요.

```{=html}
<table>
</table>
```

Raw 블록 안에는 <table> 태그가 있어야 하며, 필요하다면 <style> 태그를 통해 스타일시트를 포함할 수 있습니다.

마찬가지로 pre 태그 처리를 원한다면 Raw 블록 안에 <pre> 태그가 있어야 합니다(필요 시 <style> 허용).

변환 방식 수정

CSS 속성을 Typst 속성으로 변환하는 과정을 변경하거나 확장하려면 사용자 정의 Lua 필터를 추가할 수 있습니다.

Typst property output에 대한 Pandoc 문서와, CSS→Typst 변환 Lua 필터 소스를 참고하세요.

Typst CSS Lua 필터보다 먼저 필터를 실행해 특정 CSS 속성을 제거하면 기본 동작을 우회할 수 있습니다(아직 충분히 검증되지는 않음). 필터를 앞이나 뒤에 추가해 새로운 CSS 속성 지원을 구현하는 것도 가능합니다.

Footnotes

border, border-left etc, border-width, border-style, border-color, border-left-width etc↩︎
text-align, vertical-align↩︎

개요