希米日志
前言：
- 近日在某字库站点看到一个字体预览页面，心血来潮用
Ai写了个模拟古书页风格TXT文本阅读页面
功能：
- 目前支持10种字体切换
- 可浏览本地TXT文本，注意文本编码必须为UTF-8
- 支持自动分页，翻页快捷键（左右方向键）
- 目前仅支持PC端，手机端未做适配（不同手机屏幕大小不一，不同字体字高也不一样适配较麻烦，怕折腾！）
预览地址：
预览图：
html代码：：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿古书页预览</title>
<style>
/* style.css */
@font-face {
font-family: 'font1';
src: url('./fonts/1.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font2';
src: url('./fonts/2.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font3';
src: url('./fonts/3.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font4';
src: url('./fonts/4.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font5';
src: url('./fonts/5.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font6';
src: url('./fonts/6.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font7';
src: url('./fonts/7.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font8';
src: url('./fonts/8.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font9';
src: url('./fonts/9.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font10';
src: url('./fonts/10.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'font11';
src: url('./fonts/11.ttf') format('truetype');
font-display: swap;
}
body {
background-color: #b8bbcb73;
color: #030316d6;
font-family: font1;/**/
margin: 0;
padding: 0;
-webkit-user-select: none;
}
.container {
display: flex;
justify-content: center;
min-height: 100vh;
padding: 10px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
}
.image-container {
position: relative;
width: 709px;
height: 990px;
margin: 10px;
-webkit-user-select: none;
}
.bg-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1px;
}
.vertical-text {
position: absolute;
right: 20px;
top: 40px;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 40px;
letter-spacing: 0.25em;
line-height: 56px;
white-space: pre-line;
overflow-y: hidden;
overflow: hidden;
}
@media screen and (max-width:710px) {
.image-container {
position: relative;
width: 100vw;
height: auto;
margin: 10px;
-webkit-user-select: none;
}
.vertical-text {
position: absolute;
right: 13px;
top: 24px;
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 20px;
letter-spacing: 0.25em;
line-height: 7.9vw;
white-space: pre-line;
overflow-y: hidden;
overflow: hidden;
}
}
.pagination {
margin-top: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.page-button {
padding: 10px 20px;
margin: 10px 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
.page-button:disabled {
background-color: #ddd;
}
.page-info {
font-size: 18px;
margin: 0 15px;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
background-color: #f1fbf4;
border-radius: 4px;
/*margin-bottom: 35px;*/
font-size: 20px;
}
.custom-file-upload:hover {
background-color: #95eab8;
}
</style>
</head>
<body>
<div class="container">
<div class="image-container">
<img class="bg-image" src="./back.png" alt="背景图">
<div id="vertical-text" class="vertical-text"></div>
</div>
<div class="pagination">
<button id="prev-btn" class="page-button" onclick="changePage(-1)" disabled>上一页</button>
<span id="page-info" class="page-info">1 / 1</span>
<button id="next-btn" class="page-button" onclick="changePage(1)">下一页</button>
</div>
<label for="file-input" class="custom-file-upload">
选择txt文件, 支持UTF-8编码
</label>
<input type="file" id="file-input" accept=".txt" style="display: none;">
<span style="display: flex; align-items: center;margin:15px 0;">
<label for="font-select"style="font-size:18px;">选择字体：</label>
<select id="font-select" style="font-size:18px;">
<option value="1">汉仪昌黎宋刻字体</option>
<option value="2">851手写杂书体</option>
<option value="3">华文宋楷</option>
<option value="4">福芦禄喜体</option>
<option value="5">鼎猎珠海体</option>
<option value="6">三极花朝体</option>
<option value="7">三极行楷简体-粗</option>
<option value="8">阿里妈妈方圆体</option>
<option value="9">青柳隷书SIMO2_T</option>
<option value="10">极影毁片和圆</option>
<option value="11">云峰飞云体</option>
</select>
</span>
<p style="font-size:18px;">对于小屏幕上下显示不全的可以使用全屏模式【F11】,单击图片区域然后键盘左右键可翻页 </p>
</div>
<script>
let content = '';
let charsPerColumn = 18; // 初始值
const maxColumnsPerPage = 12;
let currentPage = 0;
function paginateText() {
if (!content) return;
const columns = splitIntoColumns(content);
const totalPages = Math.ceil(columns.length / maxColumnsPerPage);
const startColumn = currentPage * maxColumnsPerPage;
const endColumn = Math.min(startColumn + maxColumnsPerPage, columns.length);
let pageContent = columns.slice(startColumn, endColumn).join('\n');
document.getElementById('vertical-text').innerText = pageContent;
document.getElementById('prev-btn').disabled = currentPage === 0;
document.getElementById('next-btn').disabled = currentPage === totalPages - 1;
document.getElementById('page-info').innerText = `${currentPage + 1} / ${totalPages}`;
}
function splitIntoColumns(text) {
let columns = [];
let currentColumn = '';
for (let char of text) {
if (char === '\n' || currentColumn.length >= charsPerColumn) {
columns.push(currentColumn);
currentColumn = '';
}
if (char !== '\n') {
currentColumn += char;
}
}
if (currentColumn) {
columns.push(currentColumn);
}
return columns;
}
function changePage(direction) {
currentPage += direction;
paginateText();
}
document.addEventListener('keydown', function(event) {
const totalPages = Math.ceil(splitIntoColumns(content).length / maxColumnsPerPage);
if (event.key === 'ArrowLeft') {
if (currentPage > 0) {
changePage(-1);
}
} else if (event.key === 'ArrowRight') {
if (currentPage < totalPages - 1) {
changePage(1);
}
}
});
document.getElementById('file-input').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
content = e.target.result;
currentPage = 0;
paginateText();
};
reader.readAsText(file);
}
});
if (!content) {
content = `悟，悟道休言天命；修行勿取真经。一悲一喜一枯荣，哪个前生注定。袈裟本无清静，红尘不染性空，幽幽古刹千年钟，都是痴人说梦。
你是一块玉，但我不是匠人，我不过是一个略懂投机之道的混子。充其量挣几个打发凡夫俗子的铜板，你要求的是一种雄性文化的魂，我不能因为你没有说出来而装作不知道，接受你就接受了一种高度，我没有这个自信。
透视社会依次有三个层面，技术、 制度、和文化。小到一个人，大到一个国家一个民族任何一种命运归根到底都是那种文化属性的产物。强势文化造就强者， 弱势文化造就弱者，这是规律。也可以理解为天道，不以人得意志为转移。
天下之论道到极致，百姓得柴米油盐，人生冷暖论到极致，男人女人得一个情字。所谓真经，就是能够达到寂空涅盘的究竟法门。可悟不可修。修为成佛，在求。悟为明性，在知。修行以行制性。悟道以性施行。觉者由心生律；修者以律制心，不落恶果者有信无证，住因住果，住念住心，如是生灭。不昧因果者无住而住。无欲无不欲。无戒无不戒。如是涅盘。
如果养儿就是为了防老，那就别说母爱有多伟大了，您养来养去还是为了 自己，那是交换。
这个世界要不是黑白颠倒，那还叫众生吗？那该叫天国了。
强盗的本质是破格获取，破格获取和直接获取是两个不同的概念。你们没有自信与强者在同一个规则下竞争，这只能说明你是弱者，因为弱势文化所追求的最高价值就是破格获取。所以，强盗的逻辑从本质上讲是懦弱的生存哲学，所以你不算好汉。
神就是道，道就是规律，规律如来，容不得你思议，按规律办事的人就是神。
如果一个民族的文化从骨子里就是弱势文化属性，怎么可能去承载强势文化的政治、经济衡量一种文化属性不是看他的积淀的时间长短而是看他与客观规律的距离。五千年的文化是光辉，是灿烂。这个没有问题。但是，传统和习俗得过过客观规律的筛子。
女人是形式逻辑的典范，是辩证逻辑的障碍，我无意摧残女人，也不想被女人摧残。
窄门。不因上天堂与下地狱的因果关系，而具有极高的人生境界就是窄门。窄门是基督道德理想的最高价值，进了窄门，神会告诉你：我是不存在的，神就是你自己！
强势文化就是遵循事物规律的文化，弱势文化就是依赖强者得道的期望破格获取的文化，也是期望救主的文化。强势文化在武学上被称为秘笈，而弱势文化由于易学、 易懂、易用、成了流行品种。
红颜知己自古有之，这还得看男人是不是一杯好酒，自古又有几个男人能把自己酿到淡而又淡得名贵，这不是为之而可为的事，能混就混吧。
这就是圆融世故，不显山不露水，各得其所。可品行这个东西今天缺个角，明天裂个缝，也就离坍陷不远了。
这世上原来就没有什么神话。所谓的神话，不过是常人的思维所不易理解的平常事。
中国得传统文化是皇恩浩荡的文化，他的实用是以皇天在上为先决条件，中国为什么穷，穷就穷在幼稚的思维，穷在期望救主，期望救恩得文化上，这是一个渗透到民族骨子里的价值判断体系。太可怕了！
想要干好事，记住两句话：别把自己太当人，别把别人太不当人了。
杀富富不去，救贫贫不离。救主的文化唯救主可说，救主不是人，是道。得救不是破了戒的狼吞虎咽，是觉悟。
言语道断，一说即错。
马克思主义得道理归根到底一句话，客观规律不以人的意志为转移，什么是客观规律，归根到底也是一句话：一切以时间，地点和条件为转移。
我们这个民族总是以有文化自居，却忘了问一句，是有什么文化，是真理真相的文化，还是弱势文化，是符合事物规律的文化还是违背事物规律的文化，归根到底都是那种文化属性的产物，不以人的意志为转移。
女人与男人的对话方式只有两个，要么躺着，要么站着。所以，我总愿意把你想象成一个流浪街头的醉汉，想收留你，却不敢想象收留你的门槛有多高。你说过，给你扔块馒头就行，可你要的这块馒头太大了，我这个穷家养不活你。
佛说，看山是山，看水是水。我只是依佛法如实观照，看摩登女郎实摩登女郎，看红颜知己实红颜知己。
当有人笑话耶稣是傻子的时候，其实谁都不傻，仅仅是两种价值观不兼容。
比如说文化产业。文学、影视是扒拉灵魂的艺术。如果文学影视的创作能破解更高思维空间的文化密码，那么他的功效就是启迪人得觉悟，震撼人得灵魂，这是众生所需，就是功德、市场、名利、精神拯救的暴利与毒品麻醉完全等值。而且不必像贩毒那样耍花招没有心理成本和法律风险。
灵魂归宿感，这是人性本能的需要，是人性你帮他找块干净的地方归宿灵魂。
有道无术，术尚可求，有术无道，止于术。神即道，道法自然,如来!
圣经的理由是，因信着得救了，上天堂， 因不信有罪了 ，下地狱。用这种哄孩子，吓孩子得方法让人去信，虽有利于基督教的实践却也恰恰迎合了人的怕死的一面。贪婪的一面，这样的因果关系已经不给人以自觉自醒的机会，人连追求高尚的机会都没了，又何以高尚呢？改革开放，摸着石头过河，咱们这些人还没有弄清怎么回事就胡里胡涂闯入战场，得先活下来。等定下神来，时代已经变了，真的是穷则思变。可中国毕竟是政治文化搭台，传统文化唱戏，不知道老祖宗的那点东西还能把这条船撑多远。
人从根本上要面对两个问题：一、生存，得活下来。二、是要回答生命价值的问题，让心有个安住。
他跟正常人的思维颠倒了。说鬼话，办鬼事，倒行逆施。但是还有道理，像魔，柏林有个居士说他是极品混混。
认识这个人就是开了一扇窗户，就能看到不一样的东西，听到不一样的声音，能让你思考、觉悟，这已经够了。其它还有很多，比如机会、帮助，我不确定。这个在一般人看来可能不重要，但我知道这个人很重要。
更高的哲人独处着，不是他们享受孤独，而是在他们身边找不到同类！`;
paginateText();
}
const fontSelect = document.getElementById('font-select');
const body = document.body;
fontSelect.addEventListener('change', function() {
const selectedFont = this.value;
switch (selectedFont) {
case '1':
body.style.fontFamily = 'font1';
charsPerColumn = 18;
break;
case '2':
body.style.fontFamily = 'font2';
charsPerColumn = 18;
break;
case '3':
body.style.fontFamily = 'font3';
charsPerColumn = 18;
break;
case '4':
body.style.fontFamily = 'font4';
charsPerColumn = 18;
break;
case '5':
body.style.fontFamily = 'font5';
charsPerColumn = 18;
break;
case '6':
body.style.fontFamily = 'font6';
charsPerColumn = 18;
break;
case '7':
body.style.fontFamily = 'font7';
charsPerColumn = 18;
break;
case '8':
body.style.fontFamily = 'font8';
charsPerColumn = 18;
break;
case '9':
body.style.fontFamily = 'font9';
charsPerColumn = 18;
break;
case '10':
body.style.fontFamily = 'font10';
charsPerColumn = 15;
break;
case '11':
body.style.fontFamily = 'font11';
charsPerColumn = 13;
break;
default:
body.style.fontFamily = 'sans-serif'; // 默认字体
charsPerColumn = 18;
}
paginateText(); // 重新分页
});
</script>
<!--
<script src="script.js"></script>
-->
<script src="https://www.ximi.me/themes/book/js/Read_address.js" defer=""></script>
</body>
</html>
下载地址：
[txt_read.zip] (41.79M)
2025-03-20 21:46:57
评论: 12
匿名-待审核 ·
3 天
@169
@169
评论审核中···
匿名-待审核 ·
0 天
@169
@169
评论审核中···
匿名-待审核 ·
3 天
@168
@168
评论审核中···
匿名-待审核 ·
0 天
@168
@168
评论审核中···
匿名-待审核 ·
5 天
@161
@161
评论审核中···
匿名-待审核 ·
3 天
@161
@161
评论审核中···
匿名-待审核 ·
0 天
@161
@161
评论审核中···
