js-hanzi
Version:
漢字網頁排版 支持文字豎向排列，支持米字格底紋
211 lines (195 loc) • 7.97 kB
HTML
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漢字排版</title>
<style>
body {
direction: rtl;
display: flex;
align-items: normal;
height: 100vh;
margin: 0;
font-family: 'Source Han Serif TC', 'SimSun-ExtB', 'MingLiU', serif;
background-color: #f7f6f5;
}
header {
display: grid;
align-items: flex-end;
direction: ltr;
margin: 0 10px;
max-width: min-content;
}
section {
width: 100%;
height: 100%;
}
.field {
display: flex;
flex-direction: column;
}
.item {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.item2 {
margin-top: 10px;
display: flex;
flex-direction: column;
}
.switch {
display: inline-block;
width: 60px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #000;
cursor: pointer;
}
.active {
background-color: #000;
color: #fff;
}
#word {
resize: none;
}
@media print {
header {
display: none;
}
}
</style>
<script src="./zi.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
const zi = new Zi({
container: '.container',
mode: 0,
columnNum: 10,
rowNum: 10,
});
const word = document.querySelector('#word');
zi.show(word.value);
word.addEventListener('input', () => {
zi.show(word.value);
});
const mode = document.querySelectorAll('[data-name="mode"]>.switch');
mode[zi.config.mode].classList.add('active');
[...mode].forEach((e, i) => {
e.onclick = () => {
zi.setMode(i);
[...mode].forEach(e => {
e.classList.remove('active')
})
mode[i].classList.add('active')
}
})
const style = document.querySelectorAll('[data-name="style"]>.switch');
style[zi.config.style].classList.add('active');
[...style].forEach((e, i) => {
e.onclick = () => {
zi.setStyle(i);
[...style].forEach(e => {
e.classList.remove('active')
})
style[i].classList.add('active')
}
})
const column = document.getElementById('column');
const columnValue = document.getElementById('columnValue');
column.addEventListener('input', function () {
zi.setColumnNum(Number(column.value));
columnValue.textContent = '每行/列字數: ' + column.value;
});
column.value = zi.config.columnNum;
columnValue.textContent = '每行/列字數: ' + column.value;
const row = document.getElementById('row');
const rowValue = document.getElementById('rowValue');
row.addEventListener('input', function () {
zi.setRowNum(Number(row.value));
rowValue.textContent = '行/列數: ' + row.value;
});
row.value = zi.config.rowNum;
rowValue.textContent = '行/列數: ' + row.value;
const page = document.querySelectorAll('[data-name="page"]>.switch')
page[0].onclick = () => {
row.value = column.value;
rowValue.textContent = '行/列數: ' + column.value;
zi.setRowNum(Number(column.value));
zi.printIframe();
// window.print();
}
const borderColorOutPicker = document.getElementById('borderColorOutPicker');
const borderColorOutDisplay = document.getElementById('borderColorOutDisplay');
borderColorOutPicker.addEventListener('input', function () {
borderColorOutDisplay.style.backgroundColor = borderColorOutPicker.value;
zi.setBorderColorOut(borderColorOutPicker.value);
});
borderColorOutPicker.value = zi.config.borderColorOut;
borderColorOutDisplay.style.backgroundColor = borderColorOutPicker.value;
const borderColorInPicker = document.getElementById('borderColorInPicker');
const borderColorInDisplay = document.getElementById('borderColorInDisplay');
borderColorInPicker.addEventListener('input', function () {
borderColorInDisplay.style.backgroundColor = borderColorInPicker.value;
zi.setBorderColorIn(borderColorInPicker.value);
});
borderColorInPicker.value = zi.config.borderColorIn;
borderColorInDisplay.style.backgroundColor = borderColorInPicker.value;
})
</script>
</head>
<body>
<header>
<h1>漢字排版</h1>
<div class="field">
<div class="item2">
<label for="word"></label>
<textarea id="word" placeholder="待輸入">從明天起，做一個幸福的人 喂馬、劈柴，周游世界 從明天起，關心糧食和蔬菜 我有一所房子，面朝大海，春暖花開 從明天起，和每一個親人通信 告訴他們我的幸福 那幸福的閃電告訴我的 我將告訴每一個人 給每一條河每一座山取一個温暖的名字 陌生人，我也爲你祝福 願你有一個燦爛的前程 願你有情人終成眷屬 願你在塵世穫得幸福 我只願面朝大海，春暖花開</textarea>
</div>
<div class="item2">
<label for="column"></label>
<div class="column-value" id="columnValue">每行/列字數: 8</div>
<input type="range" min="1" max="50" value="8" step="1" id="column">
</div>
<div class="item2">
<label for="row"></label>
<div class="row-value" id="rowValue">行/列數: 8</div>
<input type="range" min="1" max="50" value="8" step="1" id="row">
</div>
<div class="item" data-name="mode">
<div class="switch">縱</div>
<div class="switch">橫</div>
</div>
<div class="item" data-name="style">
<div class="switch">米</div>
<div class="switch">田</div>
<div class="switch">口</div>
<div class="switch">一</div>
</div>
<div class="item" data-name="page">
<div class="switch">打印</div>
</div>
<div class="item" data-name="borderColorOut">
<label for="borderColorOutPicker">邊框颜色: </label>
<input type="color" id="borderColorOutPicker" value="#ff0000">
<div id="borderColorOutDisplay"></div>
</div>
<div class="item" data-name="borderColorIn">
<label for="borderColorInPicker">虛線颜色: </label>
<input type="color" id="borderColorInPicker" value="#ff0000">
<div id="borderColorInDisplay"></div>
</div>
</div>
<ul class="links">
<li><a target="_blank" href="https://github.com/lizongying/hanzi/">github</a></li>
<li><a target="_blank" href="https://www.npmjs.com/package/js-hanzi">npm</a></li>
<li><a target="_blank" href="https://lizongying.github.io/js-han/">簡轉漢</a></li>
</ul>
</header>
<section>
<div class="container"></div>
</section>
</body>
</html>