【自荐】现代化诗词学习网站 - 更加注重 UI、和诗词的阅读体验。

霞鹜文楷是基于 Klee One 补全的,继承了一部分 Klee One 的字形。Klee One 是日本人设计的字体,有些字形难免和大陆简体字有区别。

该字体的作者也注意到了这个问题,于是开发了一款更符合大陆字形标准的变种:

这样看,其实更推荐的应该是霞鹜文楷 GB。

1 个赞

能提交诗词么?

目前不支持,现在诗词数据规范还在完善中,做不成代码校验。只能通过提交 Issues,由我来手动添加。

能不能来一个方便点的自定义框,我觉得这个页面用来打印还是非常赞的。

打印好多人都在提,哈哈。现在已经在计划中了,等繁体的做好了,就差不多可以开始了。

自定义框是什么,可以详细说明一下吗

用来让用户自己决定输入 标题、作者、诗词内容。

主要还是用来打印嘛,可以临时解决打印额外诗词的问题嘛

大概懂了 ,现在的打印没有做优化,确实有点杂乱。需要通过调打印设置才能达到下图水品。

我不知道具体技术细节啊,我觉得,只打印

<article class="group py-8">
....
</article>

这个区域就足够了,已经非常好了。


我问了下机器人,似乎可以解决:

是的,您可以通过修改CSS来设置用户打印页面上的特定区域。

您可以使用CSS的media query语句来定义各种打印样式。在这种情况下,我们将所有的元素设置为不可见,然后只将希望可见的元素设置为可见。

以下是如何实现的示例代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            article {
                position: absolute;
                top: 0;
                left: 0;
            }
            article, article * {
                visibility: visible;
            }
        }
    </style>
</head>
<body>
    <div>不可见的内容</div>
    <article>可见的内容</article>
    <div>不可见的内容</div>
</body>
</html>

在这个示例中,所有的body元素默认设为在打印时不可见。然后,提供 article 的绝对位置,并且将它和它的所有子元素设为可见。这意味着仅article元素中的内容将在打印页面上展示。

请注意,使用 visibility: hidden 属性会隐藏元素,但保持其布局/空间。如果你不想保留这个空间,你可以使用 display: none 代替。

取决于你的具体需求,可能需要对上述代码进行细微调整。

1 个赞

你这太贴心了,必须点个赞。 泰裤辣

突然有个想法:

好像可以直接弄个打印主题,横排选择竖排安排上。

单个诗词打印免费,打印整个标签:例如唐诗三百首,收费。打出来不就可以直接出书了。哈哈,完美!

快上线试试。

(昨晚还在用 word 打印诗词,好难用

1 个赞

似乎这样效果更好些:

<style>
  @media print{
     body * {
          visibility: hidden;
     } 
     .group.py-8, .group.py-8 * {
          visibility: visible;
     }
     .group.py-8 {
          position:absolute;
          left:0;
          top:0;
     }
  }
  </style>

试了哈,确实会好一些,去除掉了一些无用的信息,后面真正开始搞的时候在细节调整哈,大概思路应该是这样的。

要做打印的话,推荐 paged.js

1 个赞

好像还不错的样子,到时候试试。

感觉挺好用,但是诗词是不是太少了。

非常棒的作品!
自己写字不好看,平时上班闲余时间会写上一两篇,讨厌写无意义的字帖,于是自己从网上找诗词用word做书法模版。
希望能加入“导出书法字帖”功能,练字与读书兼而得之~

基础的打印功能出了,我在看看字帖要怎么弄。再等等 :rofl:

诗词是我现在手录的,因为注解需要一一对应。如果直接爬取其他网站倒是可以快速补充诗词,但是质量可能比较低了。

2 个赞


打印的拼音排版能不能调整一下,拼音字符间距太大了,相邻文字的拼音凑一块了 :joy:

你这个是什么浏览器。