definitely-reviewed.css · Technical Report DR-001

A Responsive Scholarly Theme for Markdown-Derived Documents

MF Akane

Department of Suspiciously Formal Web Typography

Received: immediately · Reviewed: definitely · Accepted: somehow

We present definitely-reviewed, a responsive scholarly CSS theme for Markdown-derived documents. The proposed method increases perceived academic formality while preserving ordinary semantic HTML, responsive behavior, printability, and authoring laziness.

1. Introduction

Technical writing on the Web is commonly presented as a single flowing column. This is comfortable, but insufficiently intimidating. The present work investigates whether modern CSS can provide a more scholarly visual language without requiring authors to abandon Markdown.

The design goal is deliberately conservative: content should remain useful if the stylesheet is removed. Layout therefore lives in CSS while prose, headings, figures, tables, equations, and code remain ordinary HTML.

2. Utility Model

We define the utility of a scholarly theme by the entirely rigorous and dimensionally questionable expression

\[ U_{\mathrm{DR}} = \frac{ M^\alpha L^\beta F^\gamma }{ 1 + W }, \]

where \(M\) denotes Markdown simplicity, \(L\) legibility, \(F\) perceived formality, and \(W\) author effort. The preferred operating point maximizes formality without asking the author to become a TeX package maintainer.

3. Multi-column Layout

The layout does not explicitly switch between a mobile and desktop mode. Instead, it specifies a preferred column width and lets the browser choose the feasible number of columns.

.dr-body {
  columns: 28rem 2;
  column-gap: 3rem;
}

.dr-body h2 {
  break-after: avoid-column;
}
Listing 1. A preferred measure is more useful than a hard-coded breakpoint.

At narrow widths the article naturally becomes one column. At wider widths, it becomes two columns while maintaining an approximately readable line measure.

4. Architecture

flowchart LR MD[Markdown] --> HTML[Semantic HTML] TEX[TeX] --> KATEX[KaTeX / MathJax] MM[Mermaid] --> SVG[SVG] HTML --> CSS[definitely-reviewed.css] KATEX --> CSS SVG --> CSS CSS --> WEB[Responsive Web] CSS --> PRINT[Print / PDF]
Figure 1. Text, mathematics, and diagrams converge on ordinary HTML before the final typographic layer is applied.

5. Wide Material and Fragmentation

Multi-column layout introduces fragmentation boundaries. A naïve full-width figure can therefore leave its heading stranded at the bottom of the preceding column. The theme addresses this without wrapping every section in a special container.

.dr-wide {
  column-span: all;
}

.dr-body :is(h1, h2, h3, h4):has(+ .dr-wide) {
  column-span: all;
  break-after: avoid;
}
Listing 2. A full-width item promotes its immediately preceding heading to the same spanning context.

6. Evaluation

Configuration Formality Effort Definitely reviewed
Plain Markdown 0.31 1.00 0.12
Generic blog CSS 0.54 1.03 0.37
definitely-reviewed 0.97 1.04 1.00
Values are normalized, dimensionless, and entirely convenient.

7. Usage

Minimal integration requires one stylesheet and a small set of semantic classes.

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/definitely-reviewed@1.0.0/definitely-reviewed.css">

<article class="dr-paper">
  <header class="dr-header">…</header>
  <div class="dr-body">…</div>
</article>
Listing 3. Minimal integration.

Mathematics and diagrams are renderer-independent. Authors may use KaTeX, MathJax, Mermaid, or pre-rendered SVG. The theme merely provides the surrounding typography.

8. Administrative Markings

For documents requiring additional authority, decorative stamps are provided as an opt-in feature.

Confidential   Rejected   Accepted

9. Threats to Validity

The primary threat to validity is that no peer review was conducted.

Reviewer 2: The visual appearance of rigor should not be confused with methodological rigor.

10. Conclusion

Modern CSS is sufficiently expressive to reproduce useful scholarly conventions while remaining responsive and compatible with Markdown-first authoring workflows.

\[ \mathrm{Markdown} + \mathrm{CSS} \xrightarrow{\text{definitely-reviewed}} \mathrm{Academia} \]

Markdown in. Academia out.

References

  1. W3C CSS Working Group, CSS Multi-column Layout Module Level 1 , 2024.
  2. W3C CSS Working Group, CSS Fragmentation Module Level 3 .
  3. KaTeX Contributors, KaTeX Documentation .
  4. Mermaid Contributors, Mermaid Documentation .
  5. Akane, M. F., definitely-reviewed, GitHub repository , 2026.

definitely-reviewed.css · 技術報告 DR-JP-001

Markdown由来文書のためのレスポンシブ学術風テーマ

ミーフォ茜

怪訝形式的ウエブ組版学科・応用学術外観研究所

受付:即時 · 査読:確実 · 採択:なぜか

本稿では、Markdown由来文書に対して学術論文風の外観を付与する レスポンシブCSSテーマ definitely-reviewed を提案する。 本手法は、通常の意味論的HTMLを維持したまま、可読性、印刷適性、 執筆者の怠惰性、および視覚的査読済み感を同時に向上させる。

1. はじめに

Web上の技術文書は、一般に単一カラムの連続した本文として表示される。 これは快適ではあるが、十分に物々しくない。本研究では、著者にTeX組版への 全面的移行を要求することなく、現代CSSのみで学術誌的な視覚言語を導入できるかを検討する。

設計上の基本方針は保守的である。すなわち、スタイルシートを除去した場合でも 文書は通常のHTMLとして意味を保つべきである。したがって、本文、見出し、図表、 数式、コード等の情報構造はHTMLに保持し、組版上の権威のみをCSSが担当する。

2. 効用モデル

学術風テーマの効用を、以下の厳密かつ次元的に若干怪しい式で定義する。

\[ U_{\mathrm{DR}} = \frac{M^\alpha L^\beta F^\gamma}{1 + W} \]

ここで \(M\) はMarkdownによる記述容易性、\(L\) は可読性、 \(F\) は形式的外観、\(W\) は執筆者負担を表す。 望ましい動作点は、著者を組版パッケージ保守者へ転職させることなく \(F\) を最大化する領域に存在する。

3. CSSカラムによる段組

本テーマでは、モバイル用とデスクトップ用の段数を直接指定しない。 代わりに望ましいカラム幅を指定し、利用可能な横幅に応じた段数の決定を ブラウザへ委任する。

.dr-body {
  columns: 28rem 2;
  column-gap: 3rem;
}

.dr-body h2 {
  break-after: avoid-column;
}
Listing 1. 固定ブレークポイントではなく、望ましい本文幅を指定する。

狭い画面では自動的に1段組となり、十分な横幅が得られた場合のみ2段組となる。 この挙動により、スマートフォンからデスクトップ、印刷までを単一の文書構造で扱える。

4. 構成

flowchart LR MD[Markdown] --> HTML[意味論的HTML] TEX[TeX] --> KATEX[KaTeX / MathJax] MM[Mermaid] --> SVG[SVG] HTML --> CSS[definitely-reviewed.css] KATEX --> CSS SVG --> CSS CSS --> WEB[レスポンシブWeb] CSS --> PRINT[印刷 / PDF]
Figure 1. 本文、数式、図式を通常のHTMLへ収束させ、最終段階で組版を適用する。

5. 横長要素と分断制御

CSS Multi-column Layoutでは、カラム境界により文書が分断される。 単純に横長図へ column-span: all を指定すると、 図の直前にある節見出しだけが右カラム末尾へ取り残される場合がある。 本テーマでは、各節を特殊なコンテナで包まずにこの問題を回避する。

.dr-wide {
  column-span: all;
}

.dr-body :is(h1, h2, h3, h4):has(+ .dr-wide) {
  column-span: all;
  break-after: avoid;
}
Listing 2. 横長要素の直前にある見出しを、同一の全段コンテキストへ昇格させる。

6. 評価

条件 学術的外観 執筆負担 査読済み感
素のMarkdown0.311.000.12
一般的なブログCSS0.541.030.37
definitely-reviewed 0.97 1.04 1.00
各値は正規化済み・無次元であり、著者にとって都合のよい値を採用した。

7. 利用方法

最小構成では、スタイルシート1枚と少数の意味論的クラスのみを必要とする。

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/definitely-reviewed@1.0.0/definitely-reviewed.css">

<article class="dr-paper">
  <header class="dr-header">…</header>
  <div class="dr-body">…</div>
</article>
Listing 3. 最小導入例。

数式および図式のレンダラは独立している。 KaTeX、MathJax、Mermaid、事前生成SVG等を任意に利用でき、 本テーマはその周辺の組版のみを担当する。

8. 行政的・権威的表示

文書へ追加の威圧感が必要な場合、任意機能として各種ハンコを利用できる。

部外秘   不採択   採択

9. 妥当性への脅威

本研究における最大の妥当性への脅威は、本スタイルシートを利用するために 実際の査読を受ける必要がない点である。

査読者2:厳密そうな見た目と、方法論的な厳密さを混同すべきではない。

10. 結論

現代CSSは、Markdown-firstな執筆体験を維持したまま、 レスポンシブかつ印刷可能な学術風組版を実現するのに十分な表現力を有する。

\[ \mathrm{Markdown} + \mathrm{CSS} \xrightarrow{\text{definitely-reviewed}} \mathrm{学術っぽさ} \]

Markdownを入れる。学術っぽさが出る。

参考文献

  1. W3C CSS Working Group, CSS Multi-column Layout Module Level 1 , 2024.
  2. W3C CSS Working Group, CSS Fragmentation Module Level 3 .
  3. KaTeX Contributors, KaTeX Documentation .
  4. Mermaid Contributors, Mermaid Documentation .
  5. Akane, M. F., definitely-reviewed, GitHub repository , 2026.
  6. 著者の強い確信, 私信, 2026.