webtex-cn 0.1.0

package/dist/base.css

@@ -0,0 +1,513 @@
+/* ========================================
+   WebTeX-CN Base Styles
+   竖排古籍排版基础样式
+   ======================================== */
+
+/* ---- CSS Variables (Defaults) ---- */
+:root {
+  /* Page grid: n-rows chars per column, n-cols columns per half-page */
+  --wtc-n-rows: 21;
+  --wtc-n-cols: 8;
+  --wtc-margin-top: 60px;
+  --wtc-margin-bottom: 40px;
+  --wtc-margin-left: 50px;
+  --wtc-margin-right: 50px;
+
+  /* Grid (derived from font-size × line-height) */
+  --wtc-grid-width: calc(var(--wtc-font-size) * var(--wtc-line-height));
+  --wtc-grid-height: calc(var(--wtc-font-size) * (1 + var(--wtc-letter-spacing-ratio)));
+
+  /* Typography */
+  --wtc-font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "宋体", serif;
+  --wtc-font-size: 22px;
+  --wtc-line-height: 1.9;
+  --wtc-letter-spacing-ratio: 0.05;
+  --wtc-letter-spacing: calc(var(--wtc-letter-spacing-ratio) * 1em);
+  --wtc-font-color: #1a1a1a;
+
+  /* Border */
+  --wtc-border-show: 1;
+  --wtc-border-thickness: 0.5px;
+  --wtc-border-color: #333;
+  --wtc-outer-border-thickness: 3px;
+  --wtc-outer-border-sep: 3px;
+  --wtc-border-padding-top: 8px;
+  --wtc-border-padding-bottom: 8px;
+
+  /* Background */
+  --wtc-page-background: #fff;
+
+  /* Jiazhu: visually smaller chars but same grid-cell height as main text.
+     font-size < 1em for smaller glyphs; letter-spacing compensates to match grid height.
+     Grid height per char = font-size × (1 + ls-ratio). Jiazhu needs same total.
+     jiazhu-ls = (grid-height - jiazhu-font-size) = font-size×(1+ls-ratio) - font-size×0.85
+               = font-size × (0.15 + ls-ratio).  In em: (0.15+ls-ratio)/0.85 */
+  --wtc-jiazhu-font-size: 0.85em;
+  --wtc-jiazhu-letter-spacing: calc((0.15 + var(--wtc-letter-spacing-ratio)) / 0.85 * 1em);
+  --wtc-jiazhu-line-height: calc(var(--wtc-line-height) / 2);
+  --wtc-jiazhu-color: inherit;
+  --wtc-jiazhu-gap: 0px;
+
+  /* SideNote */
+  --wtc-sidenote-font-size: 13px;
+  --wtc-sidenote-color: #c00;
+  --wtc-sidenote-line-height: 1.25;
+
+  /* MeiPi */
+  --wtc-meipi-font-size: 14px;
+  --wtc-meipi-color: #c00;
+  --wtc-meipi-line-height: 1.3;
+
+  /* PiZhu */
+  --wtc-pizhu-font-size: 14px;
+  --wtc-pizhu-color: #c00;
+  --wtc-pizhu-line-height: 1.3;
+
+  /* Banxin */
+  --wtc-banxin-width: 40px;
+  --wtc-banxin-upper-ratio: 0.282;
+  --wtc-banxin-middle-ratio: 0.563;
+  --wtc-banxin-font-size: 13px;
+  --wtc-banxin-chapter-font-size: 13px;
+  --wtc-banxin-page-font-size: 11px;
+
+  /* Emphasis */
+  --wtc-emphasis-color: #c00;
+  --wtc-proper-name-color: #333;
+  --wtc-book-title-color: #333;
+
+  /* Page dimensions (computed from grid + borders + margins) */
+  --wtc-page-width: calc(var(--wtc-margin-left) + var(--wtc-margin-right) + var(--wtc-banxin-width) + 2 * (var(--wtc-n-cols) * var(--wtc-font-size) * var(--wtc-line-height) + 2 * var(--wtc-outer-border-thickness) + 2 * var(--wtc-outer-border-sep) + 2 * var(--wtc-border-thickness) + 8px));
+  --wtc-page-height: calc(var(--wtc-n-rows) * var(--wtc-font-size) * (1 + var(--wtc-letter-spacing-ratio)) + var(--wtc-margin-top) + var(--wtc-margin-bottom) + 2 * var(--wtc-outer-border-thickness) + 2 * var(--wtc-outer-border-sep) + 2 * var(--wtc-border-thickness) + var(--wtc-border-padding-top) + var(--wtc-border-padding-bottom));
+}
+
+/* ---- Reset ---- */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #e8e8e8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 20px;
+  font-family: var(--wtc-font-family);
+}
+
+/* ---- Page ---- */
+.wtc-page {
+  width: var(--wtc-page-width);
+  height: var(--wtc-page-height);
+  background: var(--wtc-page-background);
+  margin: 20px auto;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+  position: relative;
+  overflow: visible;
+}
+
+/* ---- Spread (double page with banxin) ---- */
+.wtc-spread {
+  display: flex;
+  flex-direction: row-reverse;
+  /* Right half first (traditional reading order) */
+  width: 100%;
+  height: var(--wtc-page-height);
+  padding: var(--wtc-margin-top) var(--wtc-margin-right) var(--wtc-margin-bottom) var(--wtc-margin-left);
+  position: relative;
+}
+
+/* ---- Half Page ---- */
+.wtc-half-page {
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+
+/* ---- Content Border (界栏) ---- */
+.wtc-content-border {
+  border: var(--wtc-outer-border-thickness) solid var(--wtc-border-color);
+  padding: var(--wtc-outer-border-sep);
+  height: 100%;
+}
+
+.wtc-content-border>.wtc-content {
+  border: var(--wtc-border-thickness) solid var(--wtc-border-color);
+  padding: var(--wtc-border-padding-top) 4px var(--wtc-border-padding-bottom) 4px;
+  height: 100%;
+}
+
+/* ---- Content Area (竖排) ---- */
+.wtc-content {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-family: var(--wtc-font-family);
+  font-size: var(--wtc-font-size);
+  line-height: var(--wtc-line-height);
+  letter-spacing: var(--wtc-letter-spacing);
+  color: var(--wtc-font-color);
+  height: 100%;
+  overflow: hidden;
+  /* 乌丝栏: inner column border lines via background-size for reliable rendering */
+  --wtc-col-width: calc(var(--wtc-font-size) * var(--wtc-line-height));
+  background-origin: content-box;
+  background-image: repeating-linear-gradient(to left,
+      transparent 0,
+      transparent calc(var(--wtc-col-width) - max(var(--wtc-border-thickness), 0.5px)),
+      var(--wtc-border-color) calc(var(--wtc-col-width) - max(var(--wtc-border-thickness), 0.5px)),
+      var(--wtc-border-color) var(--wtc-col-width));
+}
+
+/* ---- Banxin (版心) ---- */
+.wtc-banxin {
+  width: var(--wtc-banxin-width);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-left: var(--wtc-border-thickness) solid var(--wtc-border-color);
+  border-right: var(--wtc-border-thickness) solid var(--wtc-border-color);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.wtc-banxin-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* Upper: book title + upper fish tail */
+.wtc-banxin-upper {
+  flex: 0 0 28.2%;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.wtc-banxin-book-name {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: var(--wtc-banxin-font-size);
+  color: var(--wtc-font-color);
+  letter-spacing: 0.1em;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Middle: chapter/volume info */
+.wtc-banxin-middle {
+  flex: 0 0 56.3%;
+  font-size: var(--wtc-banxin-chapter-font-size);
+  color: var(--wtc-font-color);
+  border-top: var(--wtc-border-thickness) solid var(--wtc-border-color);
+  border-bottom: var(--wtc-border-thickness) solid var(--wtc-border-color);
+}
+
+.wtc-banxin-chapter {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  height: 100%;
+  gap: 2px;
+  padding: 8px 0;
+}
+
+.wtc-banxin-chapter-part {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+
+/* Lower: page number + lower fish tail */
+.wtc-banxin-lower {
+  flex: 0 0 15.5%;
+  font-size: var(--wtc-banxin-page-font-size);
+}
+
+/* Yuwei (鱼尾) */
+.wtc-yuwei {
+  font-size: 14px;
+  color: var(--wtc-border-color);
+  line-height: 1;
+}
+
+.wtc-yuwei-upper::before {
+  content: "▼";
+}
+
+.wtc-yuwei-lower::before {
+  content: "▲";
+}
+
+/* ---- Paragraph (段落) ---- */
+/* display:inline so paragraph flows with surrounding text. */
+.wtc-paragraph {
+  display: inline;
+}
+
+/* Indented paragraph: inline-block with explicit reduced height.
+   height = (n-rows - indent) × grid-height, so each column fits exactly that many chars.
+   margin-inline-start (= margin-top in vertical-rl) pushes the block down to create
+   the visual indent gap at the top of the first column. */
+.wtc-paragraph-indent {
+  display: inline-block;
+  vertical-align: top;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  height: var(--wtc-paragraph-indent-height);
+  margin-inline-start: var(--wtc-paragraph-indent);
+}
+
+/* ---- Jiazhu (夹注) ---- */
+/* In vertical-rl, flex-direction:column = block axis = right-to-left,
+   placing col1 (right) and col2 (left) side by side. */
+.wtc-jiazhu {
+  display: inline-flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  vertical-align: top;
+  font-size: var(--wtc-jiazhu-font-size);
+  letter-spacing: var(--wtc-jiazhu-letter-spacing);
+  line-height: var(--wtc-jiazhu-line-height);
+  color: var(--wtc-jiazhu-color);
+  gap: var(--wtc-jiazhu-gap);
+}
+
+.wtc-jiazhu-col {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  flex-shrink: 0;
+  /* Each sub-column = half of one main text column physical width */
+  width: calc(var(--wtc-font-size) * var(--wtc-line-height) / 2);
+}
+
+/* Flow mode: for jiazhu with nested commands */
+.wtc-jiazhu-flow {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+}
+
+/* ---- SideNote (侧批) ---- */
+.wtc-sidenote {
+  display: inline-block;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: var(--wtc-sidenote-font-size);
+  color: var(--wtc-sidenote-color);
+  line-height: var(--wtc-sidenote-line-height);
+  vertical-align: top;
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+
+/* ---- MeiPi (眉批) ---- */
+.wtc-meipi {
+  position: absolute;
+  top: 0;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: var(--wtc-meipi-font-size);
+  color: var(--wtc-meipi-color);
+  line-height: var(--wtc-meipi-line-height);
+  z-index: 10;
+}
+
+/* ---- PiZhu (批注) ---- */
+.wtc-pizhu {
+  position: absolute;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: var(--wtc-pizhu-font-size);
+  color: var(--wtc-pizhu-color);
+  line-height: var(--wtc-pizhu-line-height);
+  z-index: 10;
+}
+
+/* ---- TextBox (文本框) ---- */
+.wtc-textbox {
+  display: inline-block;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  overflow: hidden;
+  inline-size: calc(var(--wtc-textbox-height, 1) * var(--wtc-grid-height));
+}
+
+.wtc-textbox-fill {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: center;
+}
+
+/* ---- List (列表) ---- */
+/* Inline wrappers — column breaks handled by layout engine, not CSS */
+.wtc-list {
+  display: inline;
+}
+
+.wtc-list-item {
+  display: inline;
+  text-align: center;
+}
+
+/* ---- Decoration ---- */
+.wtc-emphasis {
+  text-emphasis: filled circle;
+  text-emphasis-position: left;
+  text-emphasis-color: var(--wtc-emphasis-color);
+  -webkit-text-emphasis: filled circle;
+  -webkit-text-emphasis-position: left;
+  -webkit-text-emphasis-color: var(--wtc-emphasis-color);
+}
+
+.wtc-proper-name {
+  text-decoration: underline;
+  text-decoration-color: var(--wtc-proper-name-color);
+  text-underline-offset: 0.3em;
+}
+
+.wtc-book-title-mark {
+  text-decoration: underline wavy;
+  text-decoration-color: var(--wtc-book-title-color);
+}
+
+.wtc-inverted {
+  background-color: #333;
+  color: #fff;
+  padding: 0.05em 0.1em;
+}
+
+.wtc-octagon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--wtc-border-color);
+  padding: 0.05em;
+  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%,
+      70% 100%, 30% 100%, 0% 70%, 0% 30%);
+}
+
+.wtc-circled {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--wtc-border-color);
+  border-radius: 50%;
+  padding: 0.15em;
+  width: 1.4em;
+  height: 1.4em;
+}
+
+.wtc-fix {
+  position: relative;
+  text-decoration: line-through;
+  text-decoration-color: #c00;
+}
+
+/* ---- Taitou (抬头) ---- */
+.wtc-taitou {
+  display: inline-block;
+}
+
+.wtc-taitou[data-level="0"] {
+  /* 平抬：换行不缩进 */
+}
+
+.wtc-taitou[data-level="1"] {
+  /* 单抬：上移 1 格 */
+  padding-block-start: calc(1 * var(--wtc-grid-height));
+}
+
+.wtc-taitou[data-level="2"] {
+  padding-block-start: calc(2 * var(--wtc-grid-height));
+}
+
+.wtc-taitou[data-level="3"] {
+  padding-block-start: calc(3 * var(--wtc-grid-height));
+}
+
+/* ---- Stamp (印章) ---- */
+.wtc-stamp {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+}
+
+/* ---- Math ---- */
+.wtc-math {
+  font-style: italic;
+  font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math", serif;
+  text-orientation: mixed;
+}
+
+/* ---- Newline ---- */
+br.wtc-newline {
+  /* Default break behavior */
+}
+
+br.wtc-column-break {
+  /* Force column break */
+}
+
+br.wtc-paragraph-break {
+  /* Empty line paragraph break: adds visual gap */
+  content: "";
+  display: block;
+  margin-block-end: 1em;
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 768px) {
+  :root {
+    --wtc-page-width: 95vw;
+    --wtc-page-height: auto;
+    --wtc-font-size: 16px;
+    --wtc-margin-top: 20px;
+    --wtc-margin-bottom: 20px;
+    --wtc-margin-left: 15px;
+    --wtc-margin-right: 15px;
+  }
+
+  .wtc-page {
+    box-shadow: none;
+    margin: 5px auto;
+  }
+
+  .wtc-banxin {
+    display: none;
+  }
+
+  .wtc-half-left {
+    display: none;
+  }
+}
+
+/* ---- Print ---- */
+@media print {
+  body {
+    background: none;
+    padding: 0;
+  }
+
+  .wtc-page {
+    box-shadow: none;
+    margin: 0;
+    page-break-after: always;
+  }
+
+  .wtc-page:last-child {
+    page-break-after: avoid;
+  }
+}

package/dist/honglou.css

@@ -0,0 +1,35 @@
+/* ========================================
+   红楼梦甲戌本 (Honglou Meng Jiaxu Edition)
+   Aged paper with prominent annotations
+   ======================================== */
+
+:root {
+  --wtc-n-rows: 20;
+  --wtc-n-cols: 9;
+  --wtc-margin-top: 60px;
+  --wtc-margin-bottom: 35px;
+  --wtc-margin-left: 45px;
+  --wtc-margin-right: 45px;
+
+  --wtc-font-size: 20px;
+  --wtc-line-height: 2.0;
+  --wtc-font-color: #2c1810;
+
+  --wtc-border-thickness: 0.5px;
+  --wtc-border-color: #8b5e3c;
+  --wtc-outer-border-thickness: 2px;
+  --wtc-outer-border-sep: 2px;
+  --wtc-border-padding-top: 5px;
+  --wtc-border-padding-bottom: 5px;
+
+  --wtc-page-background: #f5e6d0;
+
+  --wtc-sidenote-color: #b22;
+  --wtc-sidenote-font-size: 12px;
+  --wtc-meipi-color: #b22;
+  --wtc-meipi-font-size: 13px;
+  --wtc-pizhu-color: #b22;
+  --wtc-emphasis-color: #b22;
+
+  --wtc-banxin-width: 36px;
+}

package/dist/minimal.css

@@ -0,0 +1,26 @@
+/* ========================================
+   极简模板 (Minimal)
+   No borders, no decorations, clean layout
+   ======================================== */
+
+:root {
+  --wtc-page-width: 800px;
+  --wtc-page-height: auto;
+
+  --wtc-font-size: 18px;
+  --wtc-line-height: 1.8;
+  --wtc-font-color: #333;
+
+  --wtc-border-thickness: 0;
+  --wtc-outer-border-thickness: 0;
+  --wtc-outer-border-sep: 0;
+
+  --wtc-page-background: #fff;
+
+  --wtc-banxin-width: 0px;
+
+  --wtc-sidenote-color: #666;
+  --wtc-meipi-color: #666;
+  --wtc-pizhu-color: #666;
+  --wtc-emphasis-color: #333;
+}

package/dist/siku-quanshu-colored.css

@@ -0,0 +1,31 @@
+/* ========================================
+   四库全书彩色版 (Siku Quanshu Colored)
+   Traditional warm paper tone with colored borders
+   ======================================== */
+
+:root {
+  --wtc-n-rows: 21;
+  --wtc-n-cols: 8;
+  --wtc-margin-top: 55px;
+  --wtc-margin-bottom: 35px;
+  --wtc-margin-left: 45px;
+  --wtc-margin-right: 45px;
+
+  --wtc-font-size: 22px;
+  --wtc-line-height: 1.9;
+  --wtc-font-color: rgb(35, 25, 20);
+
+  --wtc-border-thickness: 0.5px;
+  --wtc-border-color: rgb(180, 95, 75);
+  --wtc-outer-border-thickness: 3px;
+  --wtc-outer-border-sep: 3px;
+  --wtc-border-padding-top: 6px;
+  --wtc-border-padding-bottom: 6px;
+
+  --wtc-page-background: rgb(222, 188, 130);
+
+  --wtc-sidenote-color: #c00;
+  --wtc-meipi-color: #c00;
+  --wtc-pizhu-color: #c00;
+  --wtc-emphasis-color: #c00;
+}

package/dist/siku-quanshu.css

@@ -0,0 +1,33 @@
+/* ========================================
+   四库全书 (Siku Quanshu) - 黑白版
+   Classic ancient Chinese book style
+   ======================================== */
+
+:root {
+  --wtc-n-rows: 21;
+  --wtc-n-cols: 8;
+  --wtc-margin-top: 50px;
+  --wtc-margin-bottom: 30px;
+  --wtc-margin-left: 40px;
+  --wtc-margin-right: 40px;
+
+  --wtc-font-size: 22px;
+  --wtc-line-height: 1.8;
+  --wtc-letter-spacing-ratio: 0.02;
+  --wtc-letter-spacing: calc(var(--wtc-letter-spacing-ratio) * 1em);
+  --wtc-font-color: #1a1a1a;
+
+  --wtc-border-thickness: 0.4px;
+  --wtc-border-color: #333;
+  --wtc-outer-border-thickness: 3px;
+  --wtc-outer-border-sep: 3px;
+  --wtc-border-padding-top: 5px;
+  --wtc-border-padding-bottom: 5px;
+
+  --wtc-page-background: #fff;
+
+  --wtc-sidenote-color: #c00;
+  --wtc-meipi-color: #c00;
+  --wtc-pizhu-color: #c00;
+  --wtc-emphasis-color: #c00;
+}