Tufte for Obsidian — a theme for Zettelkasten note-taking: the theme on desktop and phone

Tufte for Obsidian

Tufte for Obsidian is a port of Tufte CSS styled for Obsidian. Read this page as a specimen of the theme itself, or open any note in Reading mode (⌘E) for the full effect — wide right gutter, italic section headings, hairline rules, and labelled notes floated into the margin alongside their callers.

本页是一套为 Obsidian 改写的 Tufte CSS 主题的文档,同时也是这套主题自身的样张。在 Obsidian 中以阅读视图(⌘E)打开任意笔记即可获得完整效果——宽阔的右侧边注栏、斜体小节标题、极细分隔线,以及与正文并排浮于页边的带标号旁注。本页的每一句中文,同时都在检验主题的中文排印系统。

Marginnote

中文读者:本页另有中文版——请用侧栏底部的「Language」开关切换。正文汉字回落到宋体;所有斜体语境(本条边注除外)以楷体呈现;合成斜体已被禁用,中文永远不会被剪切变形。English readers: switch language in the sidebar.

Reading view is a text column plus a marginalia gutter, proportioned ≈ 7 : 3 and sized against the pane, not the window — so opening a sidebar narrows everything gracefully instead of crushing the text. The note's title runs the full width of the pane, column and gutter together, the way a chapter title spans a Tufte page. Once the pane drops under 760px (tufte-css's own breakpoint), the gutter is reclaimed: sidenotes collapse into tap-to-reveal toggles, full-width elements fall back to the text column, and the document still reads on a phone.

阅读视图由正文栏与边注栏组成,比例约为 7 : 3,且按窗格而非窗口取宽——打开侧边栏时版面优雅收窄,而不是被挤垮。笔记标题横贯整个窗格,正文栏与边注栏一并跨越,如同 Tufte 书页上通栏的章题。窗格窄于 760px 时(这是 tufte-css 自己的断点),边注栏被收回:旁注折叠为点按展开的开关,全宽元素退回正文栏,文档在手机上依然可读。

The combination of horizontal and vertical positions of this information creates a sort of typographical landscape.这些信息在水平与垂直方向上的位置组合,构成了一种排印的地景。

— Edward Tufte, Beautiful Evidence

Getting started上手

How to install如何安装

Both halves of the system are in Obsidian's community directories, so nothing needs to be downloaded by hand:

主题与插件均已上架 Obsidian 社区目录,无需手动下载任何文件:

  1. Theme — Settings → Appearance → Themes → Manage → search Tufte → Install and use. (Or open obsidian://show-theme?name=Tufte from a browser.)
  2. Plugin — Settings → Community plugins → Browse → search Tufte Suite → Install → Enable. (Or obsidian://show-plugin?id=tufte-suite.)
  1. 主题——设置 → 外观 → 主题 → 管理 → 搜索 Tufte → 安装并使用。(也可在浏览器中打开 obsidian://show-theme?name=Tufte。)
  2. 插件——设置 → 第三方插件 → 浏览 → 搜索 Tufte Suite → 安装 → 启用。(或打开 obsidian://show-plugin?id=tufte-suite。)
Where to get it获取途径
Community directory社区目录Repository代码仓库Latest release最新版本
Theme · Tufte主题 · TufteTufte themeTufte 主题TufteObsidianLatest release最新版本
Plugin · Tufte Suite插件 · Tufte SuiteTufte Suite pluginTufte Suite 插件tufte-suiteLatest release最新版本

Change log — what each release brought, at the end of this page.

更新日志——每次发布带来了什么,见本页末尾。

The theme stands alone; Tufte Suite completes the writing system — sidenotes, figures, inline ornaments and rendered backlinks — each module switchable on its own in Settings → Tufte Suite, which is also where the theme's typeface choices (Latin and Chinese faces and weights) live. If you still run the four standalone plugins the Suite replaced, disable them before enabling it — otherwise everything renders twice. Optional: the community Style Settings plugin surfaces the glass-chrome sliders.

主题可以独立使用;Tufte Suite 补全整套写作系统——旁注、插图、行内装饰与渲染的反向链接——每个模块都可在「设置 → Tufte Suite」中单独开关,主题的字体选择(西文与中文的字体及字重)也在那里。若你仍装着 Suite 所取代的四个独立插件,请在启用 Suite 之前先禁用它们,否则一切会渲染两遍。可选:社区插件 Style Settings 提供玻璃界面的三个滑块。

Manual installation still works: put theme.css and manifest.json from a theme release into YourVault/.obsidian/themes/Tufte/, and main.js, manifest.json and styles.css from a Suite release into YourVault/.obsidian/plugins/tufte-suite/. Requirements: Obsidian 1.4.0 or newer (Bases styling targets 1.9+); no fonts to install and no network access — ET Book and Cabin are embedded in the stylesheet.

手动安装依然可行:把主题 Release 中的 theme.css 与 manifest.json 放入 YourVault/.obsidian/themes/Tufte/;把 Suite Release 中的 main.js、manifest.json 与 styles.css 放入 YourVault/.obsidian/plugins/tufte-suite/。环境要求:Obsidian 1.4.0 或更新版本(Bases 样式面向 1.9+);无需安装字体,也无需联网——ET Book 与 Cabin 已内嵌于样式表。

How to set up如何设置

The whole system is one theme and one plugin — Tufte Suite, four modules1. Each does one job:

整套系统就是一款主题加一个插件——Tufte Suite,内含四个模块1。各司其职:

1

The theme lives at .obsidian/themes/Tufte/, the Suite at .obsidian/plugins/tufte-suite/. ET Book and Cabin are embedded in the stylesheet, so nothing is fetched from the network.主题位于 .obsidian/themes/Tufte/,Suite 位于 .obsidian/plugins/tufte-suite/。ET Book 与 Cabin 已内嵌于样式表,不从网络获取任何字体。

  • Tufte (the theme) — the typography itself: page geometry, et-book and Gill Sans, headings, tables, callouts, math, tags, the muted application chrome, light and dark alike.
  • Tufte Sidenotes — floats [!sidenote], [!marginnote], and [!epigraph] callouts into position in Reading view, and writes them for you by command.
  • Tufte Figures — the figure system: three layouts, multi-image rows, image quilts, sizing, click-to-enlarge, and auto-numbered clickable references.
  • Tufte Inline — renders the ^^new thought^^, &&lead-in&&, and @@首字下沉@@ shorthands, and wraps a selection in any of them by command.
  • Tufte Backlinks — renders Linked/Unlinked mention snippets as formatted Markdown: headings at body size, the backlink reference itself bold, underlined and accent red.
  • Tufte(主题)——排印本身:版面几何、et-book 与 Gill Sans、标题、表格、标注块、数学、标签、克制的应用外壳,浅色与深色皆备。
  • Tufte Sidenotes——在阅读视图中把 [!sidenote]、[!marginnote] 与 [!epigraph] 标注块浮到位,并可用命令替你写出它们。
  • Tufte Figures——插图系统:三种版式、多图并排、图片拼贴、尺寸设定、点击放大,以及自动编号的可点击引用。
  • Tufte Inline——渲染 ^^新思^^、&&导语&& 与 @@首字下沉@@ 三种简写,并可用命令把选区包入其中任一种。
  • Tufte Backlinks——把「链接提及/未链接提及」的片段渲染为排好版的 Markdown:标题落回正文字号,反链引用本身加粗、加下划线并作红色。

There is nothing to configure: every style below is plain Markdown the moment the theme and plugin are on. What is worth setting up is speed. Each style has a command in the palette (⌘P), and every command can carry a hotkey; the table shows the bindings used in the theme's development vault — mnemonic first letters, ⌥ for inserting, ⌃⌥ for revising. To bind them, open Settings → Hotkeys and search tufte.

无需任何配置:主题与插件一开,下文的每一种样式都只是普通 Markdown。真正值得设置的是速度。每种样式都在命令面板(⌘P)中有一条命令,每条命令都可绑定快捷键;下表列出主题开发库中使用的绑定——按功能首字母记忆,⌥ 用于插入,⌃⌥ 用于修订。要绑定它们,打开设置 → 快捷键,搜索 tufte。

Marginnote

⌘ is Command, ⌥ is Option, ⌃ is Control. On Windows and Linux, read ⌥ as Alt and ⌘ as Ctrl.⌘ 为 Command,⌥ 为 Option,⌃ 为 Control。Windows 与 Linux 上,⌥ 读作 Alt,⌘ 读作 Ctrl。

The styles, and how to call them各种样式,及其调用方式

Type the Markdown by hand, run the command from the palette, or press the keys手写 Markdown、从命令面板运行命令,或按下按键

Style样式MarkdownCommand命令Keys按键
New thought新思^^Opening phrase^^Wrap selection in New Thought将选区包裹为新思路⌥N
Lead-in导语&&Label.&& Prose…Wrap selection in lead-in将选区包裹为引导词⌥L
Sidenote旁注[^N] in prose +置于正文 + > [!sidenote] NInsert sidenote at cursor在光标处插入旁注⌥S
Marginnote边注> [!marginnote]Insert marginnote after paragraph在段落后插入边注⌥M
Epigraph题记> [!epigraph]Insert epigraph after paragraph在段落后插入题记⌥E
Figure插图> [!figure], -full, -marginInsert figure插入图⌥F
Image quilt图片拼贴a generated PNG, inserted as a figure生成一张 PNG,作为插图插入Insert image quilt插入图像拼图⌥Q
Figure reference图引用[[#^fig-N|(Fig. N)]]Insert figure reference插入图引用⌥R
Revise a figure修订插图—Edit figure at cursor编辑光标处的图⌃⌥E
Renumber figures重新编号—Renumber all figures重新编号所有图⌃⌥R
Banner题图> [!banner]——
Table title表题##### heading directly above a table标题紧贴于表格上一行——
Red highlight红色高亮==text==Toggle highlight切换高亮⌘H
首字下沉 opener首字下沉@@这@@Wrap first character in CJK drop cap将首字包裹为中文首字下沉⌥D

In the editor, all of this stays ordinary single-column Markdown: callouts look like callouts, and the ^^…^^ delimiters conceal themselves in Live Preview the way Obsidian conceals ** around bold. Reading view does the page-making. And nothing locks you in — switch to another theme or disable a plugin and the same Markdown renders as ordinary callouts and footnotes, source untouched.

在编辑器中,这一切都还是普通的单栏 Markdown:标注块看起来就是标注块,^^…^^ 定界符在实时预览中会自行隐去,一如 Obsidian 隐去粗体两侧的 **。排版是阅读视图的事。也没有任何锁定——换用别的主题或禁用插件,同一份 Markdown 就渲染为普通的标注块与脚注,源文不受影响。

The styles in action样式实例

The book design of Edward Tufte and his coauthors is well known for its concise, elegant use of typography. Tufte CSS is a port of those conventions to the web, and this theme is a further adaptation for note-taking.

Edward Tufte 及其合著者的书籍设计,以简练、优雅的排印著称。Tufte CSS 把这些惯例移植到网页上,本主题则进一步把它们改写用于笔记。

New thoughts and lead-ins新思与导语

A new thought opens a section the way Tufte's books do: the first few words set in letter-spaced small caps, with no heading required. This page's first three words are one. A lead-in is its quieter cousin — an italic run-in label followed by a tab of air, for paragraphs that carry their own topic labels.

A new thought(新思)以 Tufte 书籍的方式开启一节:开头几个词排成加了字距的小型大写字母,无需标题。导语(lead-in)是它更安静的近亲——一个斜体的行首标签,后接一格空气,用于自带主题标签的段落。

Usage.Select a phrase and press ⌥N (new thought) or ⌥L (lead-in), or type the delimiters directly — this paragraph opens with &&Usage.&&:

用法。选中一段文字,按 ⌥N(新思)或 ⌥L(导语),或直接键入定界符——本段就以 &&用法。&& 开头:

^^A new thought^^ opens a section the way Tufte's books do…

&&Usage.&& Select a phrase and press `⌥N`…

The delimiters never leave your Markdown: Live Preview conceals them and shows the styled text, strict Source mode shows them raw, and code or math spans are left alone. A third pair serves Chinese: Han glyphs have no case to small-cap, so @@这@@ — wrapping a section's first character alone, by hand or with ⌥D — drops it as an enlarged initial spanning two lines (首字下沉). The raw HTML forms work too: <span class="newthought">…</span> and <span class="dropcap-cjk">…</span> are identical to the shorthands.

定界符从不离开你的 Markdown:实时预览隐去它们、显示排好的文字,严格源码模式原样显示,代码与数学片段不受触碰。第三对定界符服务于中文:汉字没有大小写可供小型大写,于是 @@这@@——只包住一节的首个字符,手写或按 ⌥D——把它放大下沉两行(首字下沉),本页中文版的首段即是一例。原生 HTML 形式同样可用:<span class="newthought">…</span> 与 <span class="dropcap-cjk">…</span> 与简写完全等价。

Sidenotes and marginnotes旁注与边注

A sidenote is a labelled note in the right margin, called by a matching superscript in the prose. A marginnote is the same idea without the label — an aside, a date, a thumbnail caption. The label is what distinguishes them.

旁注(sidenote)是右侧页边中带标号的注释,由正文中对应的上标呼出;边注(marginnote)是不带标号的同类物——一句题外话、一个日期、一条缩略说明。有无标号,是二者唯一的区别。

The quickest way to make one is ⌥S, which does the whole thing at once: it places [^N] at the cursor — choosing the next unused number — writes an empty [!sidenote] N callout after the paragraph, and leaves the cursor inside, ready for the note text. ⌥M is the same gesture for a marginnote2.

最快的写法是 ⌥S,一次完成全部动作:在光标处放入 [^N]——自动选取下一个未用的编号——在段落之后写出一个空的 [!sidenote] N 标注块,并把光标留在其中,等你输入注文。⌥M 是边注的同一手势2。

2

Sidenotes are labelled notes in the right margin. They're always visible alongside the text that called them — no hover required.旁注是右侧页边中带标号的注释。它们始终与呼出它们的正文并排可见——无需悬停。

By hand, the recipe is exactly what the command writes for you: an inline [^N] reference in the prose paired with a [!sidenote] N callout next to it. Whatever you write after [!sidenote] becomes the margin label, so [!sidenote] 1, [!sidenote] 2, and [!sidenote] demo display as 1, 2, and demo — any short word or initial works. The Markdown for the pair above:

手写时,配方正是命令替你写下的那些:正文中一个行内 [^N] 引用,配上近旁一个 [!sidenote] N 标注块。[!sidenote] 之后写什么,页边就显示什么标号——[!sidenote] 1、[!sidenote] 2、[!sidenote] demo 分别显示为 1、2、demo——任何短词或首字母都行。上面那一对的 Markdown:

…the same gesture for a marginnote[^2].

> [!sidenote] 2
> Sidenotes are labelled notes in the right margin…

The label lives in the callout title — the same place Obsidian's standard callout syntax puts a heading. That means the margin number is rendered by Obsidian itself the instant the callout mounts, so it never flickers and never disagrees with the inline [^N] you wrote. (Notes from older vaults still work too: a [!sidenote] callout whose body is > [^N]: text is hydrated by the companion plugin into the same shape.)

标号存放在标注块的标题里——正是 Obsidian 标准标注块语法放置标题之处。这意味着页边的数字由 Obsidian 自身在标注块挂载的瞬间直接渲染,既不闪烁,也永远不会与你写下的行内 [^N] 不一致。(旧库中的笔记同样可用:正文为 > [^N]: 文字 的 [!sidenote] 标注块,会被配套插件补全为同一形态。)

A marginnote needs no inline reference at all — it's just a [!marginnote] callout next to the paragraph it belongs to:

边注则连行内引用都不需要——它只是一个放在所属段落旁的 [!marginnote] 标注块:

Marginnote

Pure asides — no reference. Use these for stage directions to the reader.纯粹的题外话——不带引用标号。适合写给读者的「舞台提示」。

Footnotes, meanwhile.Traditional Markdown footnotes are suppressed while the Tufte theme and Tufte Sidenotes plugin are active. The bottom-of-page .footnotes section is hidden, and so is the hover popover that normally appears when you mouse over a [^N] reference. What's kept visible is the inline [^N] superscript itselfdemo — the call-point label that points across to the sidenote in the margin.

至于脚注。主题与 Tufte Sidenotes 插件启用期间,传统的 Markdown 脚注被抑制:页底的 .footnotes 区域被隐去,鼠标悬停在 [^N] 引用上时通常出现的弹窗也一并隐去。保留的只有行内 [^N] 上标本身示例——它是指向页边旁注的呼出标记,标号本身也可以是中文。

demo示例

Like this — a sidenote in the margin called by the small demo label at [^demo] in the body. The label after [!sidenote] is the title Obsidian renders for the callout; the plugin floats it to the left and styles it as a Tufte-red superscript.就像这样——一条由正文中 [^示例] 处的小标号呼出的页边旁注,标号本身就是中文。[!sidenote] 之后的标号是 Obsidian 为标注块渲染的标题;插件把它浮到左侧,排成 Tufte 红的上标。

Epigraphs, and quiet callouts题记,与安静的标注块

Set off a section's opening quotation with an [!epigraph] callout — ⌥E writes an empty one after the current paragraph. The block sits indented with italic text and right-aligned attribution:

用 [!epigraph] 标注块为一节开篇的引文定调——⌥E 会在当前段落之后写出一个空的题记。整块缩进、正文斜体、出处右对齐;中文的「斜体」即楷体——请看下例:

For a successful technology, reality must take precedence over public relations, for nature cannot be fooled.

Richard Feynman

不闻不若闻之,闻之不若见之。

——《荀子·儒效》

Every other callout is quiet too: an indented paragraph with the callout title set in italic rather than a boxed card.

其他一切标注块同样安静:一段缩进的文字,标题以斜体(中文即楷体)呈现,而不是一张带框的卡片。

A modest callout一个克制的标注

This keeps annotations in the flow of the prose without adding Obsidian's usual visual weight.让批注留在行文之中,而不添加 Obsidian 惯常的视觉重量。

Tables, the Tufte wayTufte 式表格

A Tufte table is modelled on the cancer-survival specimen from Beautiful Evidence (p. 174): no outer borders, only a single hairline beneath the header row, and generous gaps between columns — set in the serif, in the manner of Tufte-LaTeX's booktabs tables, with a heavier rule above and below the whole, and centered in the text column.

Tufte 式表格以《Beautiful Evidence》第 174 页的生存率样张为范本:无外框线、表头之下仅一条细线、栏间留足空隙——以衬线体排出,取法 Tufte-LaTeX 的 booktabs 表格,整表上下各一条略粗的线,并在正文栏内居中。

To give a table a caption, put an H5 heading (#####) on the line immediately above it — the hotkey table in How to set up is captioned this way. The theme styles every H5 as a Gill Sans bold table title that sits flush against the table that follows. For a subtitle, add a single italic line just below.

要给表格加题,在表格紧上方一行放一个 H5 标题(#####)——「如何设置」一节的快捷键表就是这样加题的。主题把每个 H5 都排成 Gill Sans 粗体的表题,紧贴其后的表格。要加副题,在其下再加一行斜体即可。

Estimates of relative survival rates, by cancer site相对生存率估计,按癌症部位

% survival rates and their standard errors生存率(%)及其标准误

Cancer部位5 year5 年10 year10 年15 year15 年20 year20 年
Prostate前列腺98.8 0.495.2 0.987.1 1.781.1 3.0
Thyroid甲状腺96.0 0.895.8 1.294.0 1.695.4 2.1
Testis睾丸94.7 1.194.0 1.391.1 1.888.2 2.3
Melanomas黑色素瘤89.0 0.886.7 1.183.5 1.582.8 1.9
Breast乳腺86.4 0.478.3 0.671.3 0.765.0 1.0

The Markdown source:

Markdown 源文:

##### Estimates of relative survival rates, by cancer site
*% survival rates and their standard errors*

| Cancer   | 5 year   | 10 year  | 15 year  | 20 year  |
| -------- | -------- | -------- | -------- | -------- |
| Prostate | 98.8 0.4 | 95.2 0.9 | 87.1 1.7 | 81.1 3.0 |

Plain tables — with no ##### heading above them — render the same way, just without the title. A table wider than the column scrolls quietly inside its own box instead of dragging the whole page sideways.

普通表格——上方没有 ##### 标题——渲染方式相同,只是没有表题。过宽的表格会在自身的框内静静横向滚动,而不是把整个页面拖入横向滚动。

Digits are made to stack: the theme explicitly requests lining, tabular figures in every table — each digit the same height and width — so columns align even when a fallback face (whose default figures are old-style) steps in. For a column of multi-digit or decimal values, right-align it with a colon in the header separator (| -------: |) so the numbers stack on the ones place.

数字被要求严格对齐:主题在每个表格中显式启用等高、等宽的表格数字——每个数字同高且同宽——即便回落到默认使用旧式数字的字体,竖列依然对齐。多位数或小数的一列,在表头分隔行加一个冒号(| -------: |)使其右对齐,数字便在个位上对齐成列。

Bases, the Tufte wayTufte 式 Bases

Obsidian's Bases (.base files, and ```base fences embedded in a note) read as the same Beautiful-Evidence specimen: Gill Sans, no boxed panel behind the grid, no vertical rules, a single hairline under the header row. The table register is the prose table's: cells at 0.78 × the body size, so a Bases table and a Markdown table read as the same object; header labels in full ink above the hairline; numbers right-aligned in lining, tabular figures; and list-type properties written out as words separated by commas rather than capsule pills. Links sit quiet — a column of underlined titles is grid noise — resting as plain ink and taking their underline and their red only on hover. Row hover is the theme's usual faint ink wash; the active cell's focus ring, the column-resize handle, and toolbar buttons all pick up Tufte red only when they mean something. This applies identically to a full-tab base, a base embedded in a note, and a hover-popover preview.

Obsidian 的 Bases(.base 文件,以及内嵌于笔记的 ```base 代码块)呈现为同一种《Beautiful Evidence》样张:Gill Sans、网格背后没有面板底色、没有竖线、表头下仅一条细线。表格字号沿用正文表格的规格:单元格为正文的 0.78 倍,Bases 表格与 Markdown 表格读起来是同一种东西;表头以正墨立于细线之上;数字以等高等宽的表格数字右对齐;列表型属性以逗号相连的纯文字呈现,而非一粒粒胶囊。链接平时静默——一整列带下划线的标题只是网格噪音——安坐为纯墨色,只在悬停时才现出下划线与红色。行悬停是主题惯用的淡墨晕染;活动单元格的聚焦环、列宽拖柄与工具栏按钮,只有在真正需要表意之处才出现 Tufte 红。整页视图、内嵌视图与悬停预览三者一致。

Switch a base to Cards view and it becomes a bookshelf, in the manner of Tufte's own site showing his books: covers stand on a common shelf line — a landscape cover drops to the same baseline as its portrait neighbours — and each caption sets as a small centered title page, the title in italic serif, the data lines in small muted Gill Sans, and the repeating property labels hidden entirely (a shelf that says Author under every cover is administrative debris). There is no card chrome at all; the paper is the card. Hovering a cover reddens its title — the same pointer meaning red carries everywhere else.

把一个 Base 切到卡片视图,它就变成一座书架,取法 Tufte 官网陈列自著的方式:封面立于同一条架线之上——横开本也落到与竖开本邻居相同的基线——每条图注居中排成一页小小的扉页:书名为斜体衬线(中文即楷体),数据行为小号灰色 Gill Sans,逐条重复的属性标签全部隐去(每本书封面下都写着「作者」的书架只是行政垃圾)。卡片没有任何外壳;纸页本身就是卡片。悬停封面,书名转红——与红色在别处所承载的指针含义一致。

The live specimen in the theme's development vault is a Bookshelf.base: a Gallery view and a Table view over nine classic books, from the Odyssey (whose year: -700 feeds the formula that prints 700 BC in the Published column) through 红楼梦 (the shelf's CJK test) to Tufte's own Visual Display of Quantitative Information, the one landscape cover, letterboxed down to the shared shelf line.

主题开发库中的活样张是一个 Bookshelf.base:画廊与表格两个视图,索引九本经典——从《奥德赛》(其 year: -700 喂给公式,在「出版」列印出 700 BC)经《红楼梦》(这座书架的中文试金石)到 Tufte 自己的《The Visual Display of Quantitative Information》,唯一的横开本封面,被压到共同的架线上。

Figures插图

The Tufte Figures module brings Tufte's figure conventions to Obsidian — and then some. Drag or paste an image into the editor (or press ⌥F) and a modal opens with three tabs: Basic for the three classic single-image layouts, Multiple images for a row that shares one caption, and Image quilt for montaging many images into one PNG. In each you pick a layout, type a caption, set the figure number (auto-suggested or manual), optionally fix a size, and copy a clickable in-text reference. Everything is written as plain Markdown and rendered in Reading view; the editor keeps figures as ordinary single-column callouts. The commands: Insert figure (⌥F), Insert image quilt (⌥Q), Insert figure reference (⌥R), Renumber all figures (⌃⌥R), and Edit figure at cursor (⌃⌥E) to reopen any figure for editing.

Tufte Figures 模块把 Tufte 的插图惯例带进 Obsidian——还不止于此。把图片拖入或粘贴到编辑器(或按 ⌥F),会弹出一个带三个标签页的对话框:基础对应三种经典的单图版式,多张图片对应共用一条图注的一排图,图像拼图把许多图片拼成一张 PNG。在每个标签页里,你选定版式、键入图注、设定图号(自动建议或手动指定)、可选地固定尺寸,并复制一条可点击的文内引用。一切都以普通 Markdown 写下,在阅读视图中渲染;编辑器里的插图仍是普通的单栏标注块。命令有:插入图(⌥F)、插入图像拼图(⌥Q)、插入图引用(⌥R)、重新编号所有图(⌃⌥R),以及重新打开任一插图进行编辑的编辑光标处的图(⌃⌥E)。

The three demo images below are pulled directly from Edward Tufte's books, mirroring the originals shown on the Tufte CSS page. The figure label can be Chinese as easily as Fig. N. — the Chinese version of this page labels them 图一 to 图五.

下面三幅示例图直接取自 Edward Tufte 的著作,与 Tufte CSS 页面上的原图相同。图号同样可用中文——本页中文版把它们标为图一至图五。

Mode 1 — default figure — image in the text column with its caption floated into the right margin, labelled Fig. N. See (Fig. 1) below.

模式一——默认插图——图在正文栏,图注浮于右侧页边,标为 Fig. N.(或中文图号)。见下方(图一)。

Fig. 1. 图一. From Edward Tufte, The Visual Display of Quantitative Information, page 92. Playfair's pioneering time-series shows the trade balance between Denmark/Norway and England, the gap between the curves shading the surplus.采自 Edward Tufte《The Visual Display of Quantitative Information》第 92 页。Playfair 开创性的时间序列图显示丹麦—挪威与英格兰之间的贸易差额,两条曲线之间的间隙即为顺差。

Exports and Imports to and from Denmark & Norway from 1700 to 1780

Source:

源文:

> [!figure] Fig. 1.
> ![[exports-imports.png|Exports and Imports to and from Denmark & Norway from 1700 to 1780]]
> From Edward Tufte, *The Visual Display…* page 92.

^fig-1

Mode 2 — full-width figure — image spans the text column and the right gutter, with caption below. See (Fig. 2).

模式二——全宽插图——图横贯正文栏与右侧边注栏,图注在下。见(图二)。

Figurative map of the successive losses of the French Army in the Russian campaign, 1812–1813

Fig. 2. 图二. Charles Joseph Minard's Carte figurative of Napoleon's 1812–1813 Russian campaign — often called the best statistical graphic ever drawn — overlays six variables onto a single map: army size, location in two dimensions, direction of march, temperature, and time.Charles Joseph Minard 描绘拿破仑 1812–1813 年远征俄国的《Carte figurative》——常被称为有史以来最出色的统计图——在一张地图上叠加了六个变量:兵力、二维位置、行军方向、气温与时间。

Source:

源文:

> [!figure-full] Fig. 2.
> ![[napoleons-march.png|…]]
> Charles Joseph Minard's *Carte figurative*…

^fig-2

Mode 3 — margin figure — image and caption both in the margin, using a [!figure-margin] callout. See (Fig. 3). The image at the right is Dürer's rhinoceros, sized to fit the marginalia column.

模式三——页边插图——图与图注同在页边,使用 [!figure-margin] 标注块。见(图三)。右侧的图是丢勒的犀牛,尺寸恰好放进边注栏。

Dürer's rhinoceros, 1515

Fig. 3. 图三. F.J. Cole, "The History of Albrecht Dürer's Rhinoceros in Zoological Literature," Science, Medicine and History (Oxford, 1953), 337–356.F.J. Cole,「The History of Albrecht Dürer's Rhinoceros in Zoological Literature」,载《Science, Medicine and History》(牛津,1953),第 337–356 页。

Source:

源文:

> [!figure-margin] Fig. 3.
> ![[rhino.png|Dürer's rhinoceros, 1515]]
> F.J. Cole, "The History of Albrecht Dürer's Rhinoceros…"

^fig-3

Sizing and click-to-enlarge尺寸与点击放大

Any figure can carry an explicit size. The modal's Width × Height fields lock to the image's aspect ratio — type one and the other follows — and are saved as Obsidian's native ![[image.png|alt|WIDTH]] token (or …|WIDTHxHEIGHT]] for an independent height); leave them blank for the original size. In Reading view, click any figure image to enlarge it in a lightbox (Esc or click to close) — try it on the figures on this page. To revise a figure later, put the cursor in it and press ⌃⌥E (Edit figure at cursor) — the modal reopens pre-filled and rewrites the block on save.

任何插图都可以指定尺寸。对话框中的宽 × 高两个字段锁定图片的宽高比——填一个,另一个随之而动——并以 Obsidian 原生的 ![[image.png|alt|WIDTH]] 写法保存(或以 …|WIDTHxHEIGHT]] 单独指定高度);留空则为原始尺寸。在阅读视图中,点击任一插图即可在灯箱中放大(Esc 或再次点击关闭)——本页的插图也可以试试。日后要修订某幅插图,把光标放进去按 ⌃⌥E(编辑光标处的图)——对话框会带着原有内容重新打开,保存时改写整个块。

Multiple images in a row多图并排

The Multiple images tab turns one callout into a row of up to five images that share a single caption: heights are equalised and each image keeps its own aspect ratio, with optional per-image (a)/(b) labels. See (Fig. 4). The three hand-coloured woodcuts below come from Gart der Gesundheit (Mainz: Peter Schöffer, 1485), one of the first herbals printed with coloured illustrations.

多张图片标签页把一个标注块变成一排最多五张、共用一条图注的图:各图等高,同时保持各自的宽高比,并可选地给每张图加 (a)/(b) 标签。见(图四)。下面三幅手工上色的木刻取自《Gart der Gesundheit》(美因茨:Peter Schöffer,1485),最早印有彩色插图的草药书之一。

Deer, woodcut
(a) Deer.鹿。
Peony, woodcut
(b) Peony.芍药。
Beaver, woodcut
(c) Beaver.河狸。

Fig. 4. 图四. Three woodcuts from Gart der Gesundheit, Mainz: Peter Schöffer, 1485. The heights are equalised by the plugin while each cut keeps its own proportions.《Gart der Gesundheit》中的三幅木刻,美因茨:Peter Schöffer,1485。插件把高度拉齐,各图仍保持自身比例。

Source:

源文:

> [!figure-full] Fig. 4.
> ![[herbal-deer.webp|266]] (a) Deer.
> ![[herbal-peony.webp|278]] (b) Peony.
> ![[herbal-beaver.webp|267]] (c) Beaver.
> Three woodcuts from *Gart der Gesundheit*…

^fig-4

Image quilts图片拼贴

The Image quilt tab — also reachable directly with ⌥Q — montages many images into a single quilt, in the spirit of ImageQuilts. Drop images into the + zone, drag the tiles to reorder them, remove the ones you don't want, and tune the tile height, zoom (which crops and magnifies inside each tile), and an optional grayscale look. On Generate, the arrangement is rendered to one transparent-background PNG and inserted as an ordinary figure — inheriting the same caption, numbering, reference, lightbox, and three display modes as any other figure. Only that PNG lands in your vault; the editable layout and the source tiles are tucked away under the plugin's folder, so running Edit figure at cursor on a quilt reopens it for further tweaking. The plate below stitches woodcuts from several early printed herbals into one image. See (Fig. 5).

图像拼图标签页——也可直接按 ⌥Q 进入——把许多图片拼成一幅拼贴,取意于 ImageQuilts。把图片拖进 + 区域,拖动图块重新排序,删掉不要的,再调节图块高度、缩放(在每个图块内裁切并放大)与可选的灰度效果。点生成,整个排布被渲染为一张透明背景的 PNG,作为普通插图插入——继承与其他插图完全相同的图注、编号、引用、灯箱与三种显示模式。落入库中的只有那张 PNG;可编辑的布局与源图块收在插件自己的文件夹下,因此对拼贴运行编辑光标处的图会重新打开它以便继续调整。下图把几部早期印刷草药书中的木刻缝进了一幅图里。见(图五)。

An image quilt of medieval herbal woodcuts

Fig. 5. 图五. An image quilt generated from woodcuts in Gart der Gesundheit, Herbarius Latinus, and Hortus Sanitatis, with a Byzantine lamp, a menorah, and The Unicorn in Captivity worked in along the top.由《Gart der Gesundheit》《Herbarius Latinus》与《Hortus Sanitatis》中的木刻生成的图片拼贴,顶部还嵌入了一盏拜占庭油灯、一座七枝烛台与《被囚的独角兽》。

Each figure carries a ^fig-N block anchor, so the copyable reference [[#^fig-N|(Fig. N)]] renders as a black underlined (Fig. N) that jumps to the figure when clicked. Press ⌥R (Insert figure reference) if you need to add one later. Reorder figures freely and press ⌃⌥R (Renumber all figures) to renumber every figure, anchor, and reference top-to-bottom.

每幅插图都带一个 ^fig-N 块锚点,因此可复制的引用 [[#^fig-N|(Fig. N)]] 渲染为黑色带下划线的 (Fig. N),点击即跳到该图。日后需要补加引用,按 ⌥R(插入图引用)。插图可以随意调换顺序,再按 ⌃⌥R(重新编号所有图)从上到下重排每一幅图、每个锚点与每条引用的编号。

Banners题图

A [!banner] callout is Tufte's chapter-opening plate, ported to a note: an image that bleeds across the full pane — text column and the right gutter — cropped to a quiet horizontal band, with the callout chrome dropped entirely. No plugin required; it uses the same full-bleed device as [!figure-full]. The closing plate at the end of this page is one.

[!banner] 标注块是 Tufte 书中的章首整幅图版,移植到笔记里:一幅横贯整个窗格——正文栏与右侧边注栏——的图片,裁切为一条安静的横带,标注块的外壳全部隐去。无需插件;它用的正是 [!figure-full] 的同一套全宽手法。本页末尾的整幅图版即是一例。

> [!banner]
> ![[chapter-plate.png]]
> A quiet caption line, set below the image.章首题图下的一行安静图注。

Leave the title blank ([!banner], not [!banner] Something) — the title is always hidden in Reading view, since there is no postprocessor here to fold it into a label. The trailing text line becomes the caption automatically; skip it and the plate spans on its own. In the editor, [!banner] stays an ordinary single-column callout.

标题留空(写 [!banner],而不是 [!banner] 某某)——阅读视图中标题始终隐藏,因为这里没有后处理器把它折成图号。末行文字自动成为图注;不写它,图版便独自横贯。在编辑器中,[!banner] 仍是普通的单栏标注块。

One thing to know: a banner crops. The image is trimmed to a constant 4 : 1 band (3 : 1 on phones) — the same shape at every pane width — with the middle of the image kept. That's what makes it a banner; when a picture should be shown whole, use [!figure-full] instead.

有一点要知道:题图必然裁切。图片被裁成恒定 4 : 1 的横带(手机上为 3 : 1)——任何窗格宽度下都是同一形状——保留图片的中段。这正是它与插图的分别;要完整展示图片,请改用 [!figure-full]。

Code, restrained克制的代码

Code sits on css4.pub's beige on light paper, and on the bare paper in dark mode — no border, no rounded corners — in the platform's own monospace, noticeably smaller than the prose and indented from the left like a quotation. Syntax takes Gruvbox's colors: the faded set on the beige, the bright set on the dark paper. A fenced block's language floats in the upper-right corner as a red italic label:

代码在浅色纸面上置于 css4.pub 的米色底色之上,深色模式下则直接落在纸面——没有边框、没有圆角——采用系统自带的等宽字体,明显小于正文,并像引文一样自左侧缩进。语法配色取自 Gruvbox:米色底上用其淡色一组,深色纸上用其亮色一组。围栏代码块的语言名以红色斜体浮于右上角:

.newthought {
  font-variant: small-caps;
  font-size: 1.2em;
}

Mathematics数学

Inline math like sits on the text baseline, sized to blend with the body rather than shouting over it. Display equations —

行内公式如 坐落于文本基线之上,大小与正文相融而不喧宾夺主。展示公式——

— are set flush left with the same indent as a blockquote or a code block, not centered: an equation is set off from the prose here the way a quotation is — on the same shared edge as quotes, code, and callouts. An equation too wide for the column scrolls sideways inside its own quiet box. MathJax's Computer Modern face is kept because it cannot be safely restyled from CSS and it's what readers of scientific typesetting expect (Tufte's own books set expressions in Bembo, the book face — not an option a stylesheet can reach). In the editor, raw $…$ source renders small and muted until it compiles.

——与引文、代码块共享同一条缩进边线,左对齐排布而非居中:公式在这里与正文的分离方式同引文一样——落在与引文、代码、标注块共同的边线上。过宽的公式在自身的框内静静横向滚动。MathJax 的 Computer Modern 字体被保留,因为 CSS 无法安全替换它,而它正是科技排版读者所习惯的面貌(Tufte 自己的书用 Bembo——正文字体——排公式,这不是样式表够得着的选项)。编辑器中,未编译的 $…$ 源码以小号灰色呈现。

Inline ornaments行内装饰

  • ==Highlighted text== (⌘H) renders as Tufte-red ink rather than a highlighter-pen ground.
  • Bold and italic are restrained in kind, not in weight: bold is the body's own face one cut heavier — Songti's Black cut for Chinese, et-book Bold with a hairline stroke for English — and Chinese bold is only ever a real cut, never faked strokes.
  • A horizontal rule, like the one before Try it below, is a single hairline.
  • ==高亮文本==(⌘H)呈现为 Tufte 红墨色,而非荧光笔底色:高亮文本。
  • 加粗与斜体克制在"类"而非"量":加粗仍是正文自身的字体、再重一档——中文取宋体的 Black 字重,英文为 et-book Bold 再加一道极细描边——中文加粗只在装有真实字重时加粗,绝不伪造粗笔画;中文斜体一律以楷体呈现,永不剪切变形。
  • 分隔线——如下文「试一试」之前那一条——是一条极细线。

Chinese type, mixed with English (中文排印)中文排印规则

Body text carries a Chinese companion to et-book: Han glyphs fall through to Songti (宋体) rather than whatever generic serif the OS picks, with nothing to switch on. Every italic context — headings, *emphasis*, blockquotes, callout titles, captions — reaches for Kaiti (楷体) instead, the face Chinese book design actually uses where Latin type uses italics, and synthetic obliquing of CJK glyphs is disabled outright, so 中文 never renders sheared. Bold degrades gracefully: real bold faces are used where installed; where only STSong/SimSun exist, the theme prefers normal weight over fake-thickened strokes. Line-breaking prohibitions (禁则) apply always, and newer Obsidian builds also get full-width punctuation compression and automatic CJK/Latin spacing. The ^^…^^ opener is Latin-only (Han has no case), so there's a companion: wrap a section's first character as @@这@@ (⌥D) and it drops as an enlarged initial spanning two lines — 首字下沉, the drop cap of Chinese book design. Wrap one character only, in a paragraph at least two lines long. Switch this page to 中文 for a full demonstration.

完整规则,一处说清:正文汉字沿宋体一族回落(宋体-简 → 华文宋体 → 思源宋体 → 中易宋体),无需任何开关;一切斜体语境——标题、*强调*、引文、标注块标题、图注——改用楷体一族(楷体-简 → 华文楷体 → 中易楷体),这正是中文书籍设计在西文用斜体之处所用的字体,并彻底禁用汉字的合成斜体,中文永不被剪切变形;界面与数据语境(标签、表格、导航)从 Gill Sans 回落到黑体一族(苹方 → 冬青黑体 → 思源黑体 → 微软雅黑);粗体优雅降级——装有真实粗体则用之,只有华文宋体/中易宋体时,主题宁取常规字重也不伪造粗笔画;禁则始终生效;较新的 Obsidian 版本还有全角标点挤压与中西文自动间距。^^…^^ 开篇只适用于西文(汉字没有大小写),因此有一个中文对应物:把一节的首字包为 @@这@@(⌥D),它就放大下沉两行——首字下沉,中文书籍设计的「首字」。只包一个字,且段落至少两行。本页中文版的首段即是。

学而不思则罔,思而不学则殆。
Learning without thought is labour lost; thought without learning is perilous.

——《论语·为政》

The blockquote above is the acid test: Chinese in an italic context rendering as upright 楷体, the attribution line snapping back to 宋体, punctuation obeying 禁则 at every wrap.

上面这段引文就是试金石:斜体语境中的中文以端正的楷体呈现,出处一行回到宋体,标点在每一次换行处都遵守禁则。

Tags, in six muted hues标签,六种克制的色相

Tags render as plain accent-red text everywhere — no pill, no border, no fill. What's new is a curated palette of six restrained, print-like hues for individual tags: --tufte-tag-slate, -moss, -ochre, -plum, -teal, and -rust, every one clearing WCAG AA against both papers. An unassigned tag stays Tufte-red; to give #work its own hue, add one line to theme.css (worked examples sit, commented out, in the Tag system section). Chinese tags set in the 黑体 fallback: #研究 #修辞学 #写作.

标签处处渲染为纯粹的红色文字——没有胶囊底色、没有边框、没有填充。新添的是一套为单个标签精选的六种克制的印刷色:--tufte-tag-slate(青灰蓝)、-moss(苔绿)、-ochre(赭黄)、-plum(绛紫)、-teal(黛青)与 -rust(棕褐),在两种纸色上全部满足 WCAG AA。未指定的标签保持 Tufte 红;要给 #work 一个自己的色相,在 theme.css 中加一行即可(现成示例已注释在「Tag system」一节)。中文标签回落到黑体:#研究 #修辞学 #写作。

a.tag[href="#work" i] { --tag-color: var(--tufte-tag-slate); }

Hovering a tag keeps its hue and underlines it instead of flipping red. The tag pane and frontmatter pills pick up the same treatment automatically.

悬停标签时保持其色相、加下划线,而不是翻成红色。标签面板与属性块中的标签自动沿用同一处理。

Properties, quietly安静的属性

The properties block at the top of a note — and the File properties sidebar pane — is treated as front matter, not a form. Keys and values sit in small Gill Sans, muted keys against ink values, a clear step smaller than the prose, since front matter frames the text rather than competing with it. At rest there is no box, border, or fill; hovering a key washes it with the theme's faint ink wash. Type icons are muted while editing and hidden entirely in Reading view. Tags typed into properties render like tags anywhere else.

笔记顶部的属性块——以及侧栏的文件属性面板——被当作书籍的前置资料,而非一张表单。键名与属性值皆为小号 Gill Sans,灰色的键名对墨色的值,比正文明显小一档,因为前置资料是给正文加框,而不是与之争锋。平时没有任何框、边线或填充;悬停键名时以主题惯用的淡墨晕染。类型图标在编辑时淡化,在阅读视图中完全隐藏。写进属性的标签,与别处的标签渲染一致。

Graph view关系图谱

The graph — global and local — is drawn as ink on paper: notes are small muted dots, connections are hairlines, and the only saturated color is Tufte red, reserved for what you've focused, hovered, or searched. Tag nodes take the palette's warm ochre and attachments its cool slate (toggle Tags / Attachments on under the graph's Filters for the colors to appear), and unresolved notes fade to the faint gray of unfollowed links. The controls panel is a flat cream card with a hairline edge — no rounding, no shadow. To retune, look for the --graph-node-* wiring in theme.css's token block.

关系图谱——全局与局部——是纸上之墨:笔记是灰色小圆点,连线是细线,唯一饱和的颜色是 Tufte 红,只留给你聚焦、悬停或搜索的对象。标签节点取调色板中的暖赭黄,附件取冷青灰蓝(需在图谱「过滤器」中开启标签与附件,颜色才会出现);未创建的笔记淡去为未跟随链接的浅灰。控制面板是一张平整的米色卡片:细线描边、无圆角、无阴影。要重新调校,去 theme.css 令牌区找 --graph-node-* 的接线。

The chrome recedes退后的界面外壳

The application shell — file explorer, tabs, view header, ribbon, status bar, search — is a frame, not a document, and it recedes like a museum mat around a print: no rounded corners, no filled pills anywhere. Nav rows and tab titles sit in small Gill Sans; the one open file is marked with a small red rule on its left edge rather than a colored pill; search-result titles keep the same italic-serif citation style as the backlinks pane, so a note reads identically wherever you find it. The search field is a hairline underline that turns red on focus.

应用外壳——文件浏览器、标签页、视图标题栏、功能区、状态栏、搜索——是画框而非文档,它像版画周围的卡纸一样退后:处处无圆角、无填充胶囊。导航行与标签页标题为小号 Gill Sans;当前打开的文件以左缘一道细红线标记,而非彩色胶囊;搜索结果的笔记名沿用反向链接面板的斜体衬线「引文式」样式,一条笔记在哪里被找到,读起来都一样。搜索框是一条细下划线,聚焦时转红。

Glass, to taste玻璃,随君所好

The chrome can also recede literally. Every floating and chrome surface — menus, the command palette, modals and Settings, hover previews, sidebars, the tab strip, the status bar, the graph controls — sits at 95% of its own paper shade behind a soft backdrop frost, so whatever lies beneath ghosts through. The document is exempt: the page stays opaque paper, the interface turns to glass, and the tonal step between them — the thing that makes elevation legible — survives.

外壳还能退得更彻底。一切浮层与外壳表面——菜单、命令面板、对话框与设置、悬停预览、侧边栏、标签条、状态栏、图谱控制面板——以自身纸色的 95% 呈现,背后衬一层柔和的磨砂,底下的东西便隐约透出。文档除外:纸页保持不透明,界面化为玻璃,二者之间的明度落差——让层次得以辨认的那一步——得以保全。纸是纸,玻璃是玻璃。

There is also a whole-window mode. Turn on Settings → Appearance → Translucent window (macOS) and the window composites down to a single sheet of paper at 85% opacity over the system's own vibrancy blur, the desktop wallpaper honestly present beneath the text. Here the theme's frost deliberately stands down — the OS is already blurring at the window layer, and backdrop filters quarrel with native vibrancy on the Mac — one material replaces the page/chrome step, and full screen reverts to opaque paper. Dark mode shows the wallpaper through most strongly.

还有整窗模式。打开设置 → 外观 → 半透明窗口(macOS),整个窗口便合成为一张 85% 透明度的纸,覆于系统自身的活力模糊之上,桌面壁纸诚实地透纸而现。此时主题自身的磨砂主动让位——系统已在窗口层做了模糊,而 Mac 上的背景滤镜与原生活力效果会打架——一种材质取代了纸页/外壳的落差,全屏时则恢复为不透明的纸。深色模式下壁纸透出得最为分明。

Three knobs govern all of it: --tufte-glass-opacity (default 95%; at 100% the glass is gone), --tufte-glass-blur-radius (default 12px of frost), and --tufte-sheet-opacity (default 85% — the whole-window sheet; lower it toward 60–70% for more wallpaper). Install the community Style Settings plugin and the three appear as sliders under Style Settings → Tufte → Glass chrome; without it they are ordinary tokens in the Glass chrome section of theme.css.

三个旋钮统管这一切:--tufte-glass-opacity(默认 95%;到 100% 玻璃便消失)、--tufte-glass-blur-radius(默认 12px 的磨砂)与 --tufte-sheet-opacity(默认 85%——整窗那张纸;调低到 60–70% 可透出更多壁纸)。装上社区插件 Style Settings,三者即以滑杆出现在 Style Settings → Tufte → Glass chrome 下;不装的话,它们就是 theme.css 中 Glass chrome 一节的普通令牌。


Try it试一试

  1. Edit any note and toggle Reading view (⌘E) to watch the plugin float marginalia into the gutter.
  2. Press ⌥S mid-paragraph: the [^N] reference, the labelled callout, and the cursor all land where they belong — just type the note. ⌥M and ⌥E do the same for marginnotes and epigraphs.
  3. Select the opening words of a section and press ⌥N to set them in small caps; try ⌥L on a paragraph's topic label, and ⌥D on a Chinese paragraph to drop its first character two lines deep.
  4. Drop an image on the editor — or press ⌥F — and let the figure modal walk you through the three layouts.
  5. Give a chapter note a [!banner] plate, and a favorite tag one of the six palette hues (the commented examples in theme.css § Tag system show the one-line recipe).
  6. Switch between Light and Dark mode (⌘, → Appearance) — both are themed, graph view and all.
  7. Build a base and flip it to Cards view to see covers standing on the shelf, then back to its Table view for the finished specimen register.
  8. Turn on Translucent window (Settings → Appearance, macOS) to read on an 85% sheet of paper over your wallpaper — and install Style Settings if you want the three glass sliders.
  9. Switch this page to 中文 to see the Chinese typographic system at work — 宋体 body, 楷体 italics, mixed-script spacing.
  10. Open Settings → Tufte Suite → Typefaces to choose faces and weights; open theme.css to tune the page width, gutter ratio, or color tokens.
  1. 编辑任意笔记并切换阅读视图(⌘E),看插件把页边内容浮入边注栏。
  2. 在段落中间按 ⌥S:[^N] 引用、带标号的标注块与光标全都各就各位——只管输入注文。⌥M 与 ⌥E 对边注与题记做同样的事。
  3. 选中一节的开头几个词按 ⌥N,把它们排成小型大写;对段落的主题标签试试 ⌥L;对一段中文按 ⌥D,让首字下沉两行。
  4. 把图片拖到编辑器上——或按 ⌥F——让插图对话框带你走一遍三种版式。
  5. 给一篇章节笔记一幅 [!banner] 题图,给一个常用标签指定六种调色板色相之一(theme.css「Tag system」一节的注释示例给出了一行配方)。
  6. 在浅色与深色模式之间切换(⌘, → 外观)——两者皆已完整适配,关系图谱亦然。
  7. 建一个 Base 并切到卡片视图,看封面立于架上;再切回表格视图,看完成态的样张字号。
  8. 打开半透明窗口(设置 → 外观,macOS),在壁纸之上的一张 85% 的纸上阅读——若想要三个玻璃滑杆,再装上 Style Settings。
  9. 把本页切换到 English,对照阅读西文排印;再切回中文,看宋体正文、楷体斜体与中西文间距如何协作。
  10. 打开设置 → Tufte Suite → 字体,选择字族与字重;打开 theme.css 调整页宽、栏沟比例或颜色令牌。

Reference参考

  • Tufte for Obsidian — the theme's repository and README
  • Tufte Suite — the companion plugin's repository and README
  • Tufte CSS — Dave Liepmann and contributors; the typographic source this theme adapts
  • ET Book — Dmitry Krasny, Bonnie Scranton, Edward Tufte, Adam Schwartz (MIT), embedded in theme.css; Cabin — the Cabin Project Authors (SIL OFL 1.1), embedded as the bundled sans
  • Edward Tufte — the books this is all modelled on: The Visual Display of Quantitative Information, Envisioning Information, Visual Explanations, Beautiful Evidence
  • Tufte for Obsidian——主题的代码仓库与 README(中文)
  • Tufte Suite——配套插件的代码仓库与 README
  • Tufte CSS——Dave Liepmann 与诸位贡献者;本主题所改写的排印源头
  • ET Book——Dmitry Krasny、Bonnie Scranton、Edward Tufte、Adam Schwartz(MIT 许可),内嵌于 theme.css;Cabin——the Cabin Project Authors(SIL OFL 1.1),作为随主题分发的无衬线体内嵌
  • Edward Tufte——这一切所取法的书:《The Visual Display of Quantitative Information》《Envisioning Information》《Visual Explanations》《Beautiful Evidence》

Change log更新日志

Newest first. The same lists live in the READMEs on GitHub: theme · Tufte Suite.

最新在前。GitHub 上的 README 有同样的列表:主题 · Tufte Suite。

Tufte (theme)Tufte(主题)

  • 1.21.0 (2026-09-18)
    • Bold Chinese takes Songti's Black cut
    • Bold English a hairline heavier
    • Cream labels on the red buttons in dark mode
    • Tables centered in the text column
  • 1.20.0 (2026-09-17)
    • Code blocks take css4.pub's beige ground on light paper
    • Syntax colors in Gruvbox, light and dark
    • Code in the platform's monospace, at css4.pub's spacing
    • Editor gutter numerals in the code face
    • No spell-check underlines inside code
  • 1.19.0 (2026-08-29)
    • Now, the Style Settings panel speaks 23 languages
    • Pair with Tufte Suite 1.3.0
  • 1.18.0 (2026-08-14)
    • Adjust the Properties panel
    • Now, the Style Settings panel speaks Chinese
    • Pair with Tufte Suite 1.2.0
  • 1.17.0 (2026-08-14)
    • Make typefaces adjustable: Latin and Chinese faces and weights (Tufte Suite → Typefaces)
    • Bold follows the body weight
    • Set the interface in Gill Sans, one size larger
    • Embed Cabin as the bundled sans
    • Pair with Tufte Suite 1.1.0
  • 1.16.3 (2026-08-14)
    • Limit the reading layout to note panes
    • Update the print geometry for figure captions
  • 1.16.2 (2026-08-11)
    • Enlarge the lead-in slightly
    • Tighten the space after H1
  • 1.16.1 (2026-08-11)
    • Inline shorthands now survive nested markup
  • 1.16.0 (2026-08-04)
    • Add print / PDF export in the Tufte style
    • Reset tables on the booktabs model
    • Tint highlights; tone down unresolved links
  • Earlier releases — see Releases.
  • 1.21.0(2026-09-18)
    • 中文粗体改用宋体的 Black 字重
    • 英文粗体略微加重
    • 深色模式下红色按钮改用纸色文字
    • 表格在正文栏内居中
  • 1.20.0(2026-09-17)
    • 代码块在浅色纸面上取 css4.pub 的米色底色
    • 语法配色采用 Gruvbox,浅色与深色皆备
    • 代码改用系统等宽字体,取 css4.pub 的间距
    • 编辑器行号栏改用代码字体
    • 代码内不再有拼写检查下划线
  • 1.19.0(2026-08-29)
    • Style Settings 面板现已支持 23 种语言
    • 请与 Tufte Suite 1.3.0 搭配
  • 1.18.0(2026-08-14)
    • 调整属性面板
    • Style Settings 面板现已支持中文
    • 请与 Tufte Suite 1.2.0 搭配
  • 1.17.0(2026-08-14)
    • 字体可调:西文与中文的字族与字重(Tufte Suite → 字体)
    • 粗体随正文字重变化
    • 界面改用 Gill Sans,字号上调一档
    • 内嵌 Cabin 作为随主题分发的无衬线体
    • 请与 Tufte Suite 1.1.0 搭配
  • 1.16.3(2026-08-14)
    • 阅读版面只作用于笔记窗格
    • 更新插图题注的打印几何
  • 1.16.2(2026-08-11)
    • 导语略微放大
    • 收紧 H1 之后的间距
  • 1.16.1(2026-08-11)
    • 行内简写现可容纳嵌套标记
  • 1.16.0(2026-08-04)
    • 新增 Tufte 风格的打印/PDF 导出
    • 表格改为 booktabs 样式
    • 高亮改为淡彩;未创建链接的颜色变淡
  • 更早版本——见 Releases。

Tufte Suite

  • 1.3.0 (2026-08-29)
    • Now, the Suite speaks 44 languages
    • Add companion typefaces for 19 scripts, Japanese included
    • Reorder companion scripts to pick Han character shapes
    • Fix a Reading-view figure showing the previous image
    • Pair with theme Tufte 1.19.0
  • 1.2.0 (2026-08-14)
    • Now, the whole Suite speaks Chinese
    • Unify the figure modal's tabs with the settings tab bar
    • Pair with theme Tufte 1.18.0
  • 1.1.0 (2026-08-14)
    • Add the Typefaces settings: Latin and Chinese faces and weights
    • Add pickers for installed system fonts
    • Requires theme Tufte 1.17.0
  • 1.0.2 (2026-08-14)
    • Fix figure captions overlapping sidenotes
    • Align the left edges of margin content
  • 1.0.1 (2026-08-11)
    • Inline shorthands now survive nested markup
  • 1.0.0 (2026-08-05)
    • First release: the four Tufte plugins bundled as switchable modules
  • 1.3.0(2026-08-29)
    • Suite 现已支持 44 种语言
    • 新增 19 种文字的伴随字体,包含日文
    • 调整伴随文字的顺序即可选择汉字字形
    • 修复阅读视图错显上一张插图
    • 请与主题 Tufte 1.19.0 搭配
  • 1.2.0(2026-08-14)
    • 整个 Suite 现已支持中文
    • 插图对话框的标签页与设置标签栏统一
    • 请与主题 Tufte 1.18.0 搭配
  • 1.1.0(2026-08-14)
    • 新增字体设置:西文与中文的字族与字重
    • 新增系统已装字体的选择器
    • 需要主题 Tufte 1.17.0
  • 1.0.2(2026-08-14)
    • 修复插图题注与旁注重叠
    • 对齐页边内容的左缘
  • 1.0.1(2026-08-11)
    • 行内简写现可容纳嵌套标记
  • 1.0.0(2026-08-05)
    • 首个版本:四个 Tufte 插件打包为可开关的模块

长卷中段的主峰一带,青绿设色的群山临江而立
Wang Ximeng, A Thousand Li of Rivers and Mountains, 1113, ink and color on silk, Palace Museum, Beijing — the central peak, from the middle of the scroll. Public domain.王希孟《千里江山图》,1113 年,绢本设色,北京故宫博物院藏——长卷中段的主峰一带。