Skip to content

Commit

Permalink
上傳源文件
Browse files Browse the repository at this point in the history
  • Loading branch information
i-font committed Jul 29, 2024
1 parent b4c6ec8 commit 7c4c122
Show file tree
Hide file tree
Showing 31 changed files with 16,103 additions and 5 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
*.pdf
*.vfc
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 傳承字形推薦形體表——網頁排版源文件

本倉庫用於存放和托管《傳承字形推薦形體表》的網頁排版源文件。訪問本倉庫對應的 [GitHub Pages 網頁]()可以在瀏覽器內排版渲染《傳承字形推薦形體表》的 PDF 文件。
本倉庫用於存放和託管《傳承字形推薦形體表》的網頁排版源文件。訪問本倉庫對應的 [GitHub Pages 網頁](https://ichitenfont.github.io/recom)可以在瀏覽器內排版渲染《傳承字形推薦形體表》的 PDF 文件。

本文檔使用 [Paged.js](https://pagedjs.org) 排版。使用 Chrome 123+ 版的排版效果最佳,因爲 Chrome 123 版起開始默認啓用 CSS 標點擠壓,較爲貼近舊版《傳承字形推薦形體表》1.04 版使用 Microsoft Word 排版的效果。

Expand All @@ -9,7 +9,7 @@
此處的 `本地` 指的是當前使用的電腦終端。

* `index.html`:排版顯示的網頁。固定文本(如前言、作者、各表標題等)都在這個文件編寫。也負責導入其他文件。
* `index.css`:定義網頁顯示效果,例如頁眉頁脚、字表格式等。
* `index.css`:定義網頁顯示效果,例如頁眉頁腳、字表格式等。
* `index.js`:排版邏輯,引入純文本的 JSON 文件來進行排版。
* `recommended-char-list.json`:字表的純文本 JSON 文件。格式如下節所述。
* `variant-forms.json`:〈附錄一:變體部件表〉的純文本 JSON 文件。格式如下節所述。
Expand All @@ -32,7 +32,7 @@

## 字表格式:`recommended-char-list.json`

此表用於排版〈表一:一級漢字區〉、〈表二:二級漢字區〉和〈表三:添補漢字區〉,使用 [JSON 格式](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON),屬於純文本格式。使用的格式大致如下:
此表用於排版〈表一:一級漢字區〉、〈表二:二級漢字區〉和〈表三:添補漢字區〉,使用 [JSON 格式](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON),屬於純文本格式。使用的格式大致如下:

```json
{
Expand Down Expand Up @@ -189,10 +189,10 @@

本倉庫源文件(除了 `webfont/` 內的字型文件)和其衍生品《傳承字形推薦形體表》 PDF 皆以 [共享創意-署名4.0授權協議](https://creativecommons.org/licenses/by/4.0/) 授權。

`webfont/` 內的字型文件以各自的字型授權使用。`I.Iosevka``Inter` 以 SIL OFL 授權`I.MingWebVar` 以 IPA開放字型授權協議 1.0版授權
`webfont/` 內的字型文件以各自的字型授權使用。`I.Iosevka``Inter` 以 SIL OFL 1.1 版授權`I.MingWebVar` `I.MingWebWriting` 以 IPA開放字型授權協議 1.0 版授權

[`pagedjs` 0.4.3](https://www.npmjs.com/package/pagedjs)[`browser-dtector` 4.1.0](https://www.npmjs.com/package/browser-dtector) 爲冷凍的引用模塊,以 MIT 授權使用。

## 致謝

感謝 [@rwxguo](https://github.com/rwxguo) 初期協助進行數據校驗。
感謝 [@rwxguo](https://github.com/rwxguo) 初期協助進行數據校驗。
328 changes: 328 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,328 @@
/* 預覽網頁(非排版) */
body {
padding: 2em;
}

/* 單元格填色 */
.not-suggested {
border: 0.01em solid black;
background-color: #eee;
color: #C0504D;
}
.repeated {
border: 0.01em solid black;
background-color: #eee;
color: #00B050;
}
span.not-suggested, span.repeated {
/* 前言的填色 */
border: none;
}

/* 附錄 部件填色 */
.recommended-form {color: #002060;}
.orthography-form {color: #00B0F0;}
.aesthetic-form {color: #538135;}

/* 内容字體設置 */
h1 {
text-align: center;
margin-bottom: 1em;
font-size: 1.5em;
font-family: var(--page-header-font);
bookmark-level: 1;
bookmark-label: content();
}
h2 {
text-align: center;
margin-bottom: 1em;
font-size: 1.2em;
font-family: var(--serif-header-font);
page-break-after: avoid;
bookmark-level: 2;
bookmark-label: content();
}
h3, h4 {
font-family: var(--serif-header-font);
font-size: 1em;
text-align: left;
margin-block: 0.5em;
page-break-after: avoid;
}
h3 {
bookmark-level: 3;
bookmark-label: content();
}
h4 {
bookmark-level: 4;
bookmark-label: content();
}
/* SVG圖片 */
.picture-char {
display: inline;
height: 1em;
width: 1em;
line-height: 1em;
/* 根據西文基綫對齊底部,然後往下壓 */
vertical-align: baseline;
position: relative;
bottom: -0.12em;
}

/* 頁面内容設置 */
section.content {
page-break-after: always;
}
section.content p {
line-height: 1.5em;
margin-bottom: 1em;
text-align: justify; /* 左右對齊 */
hanging-punctuation: end; /* 標點懸挂(chrome暫不支持) */
}

/* 前言 */
section#intro p {
margin-bottom: 1.2em; /* 段落之間空行 */
}
section#intro span.handwriting-form {
font-family: var(--intro-handwriting); /* 其他字形 */
}
section#intro ol#intro-collect-char-rules {
list-style-type: cjk-decimal;
line-height: 1.5em;
margin-bottom: 1.2em;
padding-left: 2em;
}

/* 目錄 */
#toc-list {
list-style-type: none;
padding-left: 0;
}
#toc-list li a {
color: black;
}
#toc-list li[data-title-level="h1"] {
font-family: var(--serif-header-font);
margin-top: 0.5em;
}
#toc-list li[data-title-level="h2"] {
font-family: var(--text-font);
margin-left: 2em;
}
#toc-list li a::after { /* 章節頁碼自動替換 */
content: target-counter(attr(href), page);
float: right;
}

/* 表格 */
table {
border-collapse: collapse;
width: 100%;
}
table tr, table td {
border: 0.01em solid black;
}
/* 表格單元格的分類標題(表三分級用) */
table.charlist tr th.part-header {
background-color: #ffc;
color: #e26c09;
width: 12.5%;
border: 0.01em solid black;
font-weight: normal;
font-size: 2em;
}
/* 表格單元格 */
table.charlist tr td {
text-align: center;
width: 12.5%;
height: 1.6in;
vertical-align: top;
padding: 6px 4px;
position: relative; /* 用於裏面的註釋號碼固定在右下角*/
}
table.charlist tr td span {display: block;}
table.charlist tr td span.big5 {
font-family: var(--big5-value-font); /* Big5 碼用代碼字體 */
}
table.charlist tr td span.big5 span.hkscs{
font-size: 0.6em; /* HKSCS 的 H- 標簽縮小*/
display: inline;
}
table.charlist tr td span.sample-char{
font-size: 3em;
line-height: 1.4;
margin-bottom: -2px;
}
table.charlist tr td span.unicode{
margin-bottom: 3px;
font-family: var(--unicode-value-font);
font-feature-settings: "tnum";
}


/* 注釋引用標簽 */
a.ref-tag-in-table { /* 需要上一級是 position:relative */
font-family: var(--reference-tag-font);
font-feature-settings: 'jp90'; /* 註斜點 */
position: absolute;
right: 4px;
bottom: 4px;
font-size: 0.75em;
}

/* 注釋列表設置 */
ol.endnotes li {
margin-bottom: 0.5em;
}
ol.endnotes li a.endnote-refer-back {
padding-inline-end: 0.25em;
line-height: 0.9em;
white-space: nowrap;
}


/* 附錄表格 */
section#appendix1 table td {
position: relative; /* 用於裏面的註釋號碼固定在右下角*/
padding: 4px 6px;
}
section#appendix1 table#appendix1-similar-component th {
width: 3em; /* 組合部件標題 */
font-size: 1.5em;
font-weight: normal;
background-color: #ffc;
color: #e26c09;
border: 0.01em solid black;
}
section#appendix1 table#appendix1-individual-component td {
width: 25%; /* 單獨部件4個一行,25% */
}
section#appendix1 table p.header-component {
margin: 0;
}
section#appendix1 table p.shown-char {
font-size: 2em;
line-height: 1.08em;
margin: 0;
}
section#appendix1 table .sample-variant-char {
font-family: var(--variant-font);
}


/* 章節分類 */
section#chap1 {
page: chap1;
}
section#chap2 {
page: chap2;
}
section#chap3 {
page: chap3;
}
section#appendix1 {
page: appx1;
}
section#endcover {
page: endcover;
position: relative;
height: 100%;
width: 100%;
}

@media print {
body {
padding: 0;
}

@page {
size: A4;
margin: 1in 1.214in; /* 左右盡量使漢字網格可以在12pt對齊35字 */

@bottom-center {
content: "頁 " counter(page);
vertical-align: top;
}

.pagedjs_margin.pagedjs_margin-top-left, .pagedjs_margin.pagedjs_margin-top-right, .pagedjs_margin.pagedjs_margin-bottom-center {
font: 500 10pt var(--page-header-font);
}

/* dot-dot-dash https://stackoverflow.com/questions/54378607/how-to-create-dash-dot-and-dash-dot-dot-lines-and-rectanges-in-css */
.pagedjs_margin-top {
padding-bottom: 0.51em;
background:
repeating-linear-gradient(to right,#000,#000 1px,transparent 1px,transparent 2px) 0 calc(100% - 0.38em)/100% 0.05em no-repeat;
}
.pagedjs_margin-bottom {
padding-top: 0.4em;
background:
repeating-linear-gradient(to right,#000,#000 1px,transparent 1px,transparent 2px) 0 0.2em/100% 0.05em no-repeat;
}
}
@page {
@top-left {
content: "傳承字形推薦形體表";
vertical-align: bottom;
}
}
@page {
@top-right {
content: "版本:" var(--version-number, '加載資料失敗,請刷新頁面');
vertical-align: bottom;
}
}

/* 不同章節的不同header */
@page chap1 {
@top-left {
content: "傳承字形推薦形體表(表一)";
vertical-align: bottom;
}
}
@page chap2 {
@top-left {
content: "傳承字形推薦形體表(表二)";
vertical-align: bottom;
}
}
@page chap3 {
@top-left {
content: "傳承字形推薦形體表(表三)";
vertical-align: bottom;
}
}
@page appx1 {
@top-left {
content: "傳承字形推薦形體表(附錄一)";
vertical-align: bottom;
}
}

@page endcover {
@top-left {
content: none;
}
@top-right {
content: none;
}
@bottom-center {
content: none;
}
.pagedjs_margin-top {
background: none;
}
.pagedjs_margin-bottom {
background: none;
}
}


tr, th, td {
page-break-inside: avoid;
}
th, td {
page-break-before: avoid;
}
}
Loading

0 comments on commit 7c4c122

Please sign in to comment.