Giter Club home page Giter Club logo

heti's Introduction

赫蹏

赫蹏(hètí)是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来,可以为网站的读者带来更好的文章阅读体验。

预览:https://sivan.github.io/heti/

Preview

主要特性:

  • 贴合网格的排版;
  • 全标签样式美化;
  • 预置古文、诗词样式;
  • 预置多种排版样式(行间注、多栏、竖排等);
  • 多种预设字体族(仅限桌面端);
  • 简/繁体中文支持;
  • 自适应黑暗模式;
  • 中西文混排美化,不再手敲空格👏(基于 JavaScript 脚本);
  • 全角标点挤压(基于 JavaScript 脚本);
  • 兼容 normalize.cssCSS Reset 等常见样式重置;
  • 移动端支持;
  • ……

总之,用上就会变好看。

使用方法

  1. 在页面的 <head> 标签中引入 heti.css 文件:
    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
    
  2. 在要作用的容器元素上增加 class="heti" 的类名即可:
    <article class="entry heti">
      <h1>我的世界观</h1>
      <p>有钱人的生活就是这么朴实无华,且枯燥</p>
      ……
    </article>
    
  3. 使用增强脚本(可选):
    <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
    <script>
      const heti = new Heti('.heti');
      heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
    </script>
    

WIP

暂时没什么想做的了。

  • 自适应黑暗模式
  • 标点挤压
  • 中、西文混排
  • 繁体中文支持
  • 诗词版式
  • 行间注版式

-- EOF --

heti's People

Contributors

ayaka14732 avatar dependabot[bot] avatar hyrious avatar kirklin avatar leoleoasd avatar liyishuai avatar odysa avatar piggynl avatar sivan avatar xiaolai avatar xiejiss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

heti's Issues

用户脚本支持

非行业人士,咨询下可否做为 JavaScript 脚本 对所有网站进行支持?

宋体显示bug

  1. 版本号:Microsoft Edge 版本 96.0.1054.43下,宋体的各类加粗效果均无法显示
    image

使用了heti样式后,文字无法居中

截图:
屏幕截图 2023-02-10 224205

样式代码:

.blink {
    position: fixed;
    height: 100%;
    width: 100%;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    line-height: 30px;
    justify-content: center;
    animation: blink 3s linear infinite;
    -webkit-animation: blink 3s linear infinite;
    -moz-animation: blink 3s linear infinite;
    -ms-animation: blink 3s linear infinite;
    -o-animation: blink 3s linear infinite;
}

有什么办法在移动设备上也支持吗?

我的 Pages 是使用的 mdbook 生成的 html,自定义样式中引用了 heti css 和 增强版的 js,在 PC 上显示没有问题,但是用手机在移动端查看的时候,区别不出来字体,并且官方 demo 的那个我在 移动端查看也没有字体的变化,这个有办法处理吗?

我的 Pages 地址 : https://codechina.gitcode.host/programmer/heti-test/1-10-years-ios-and-android.html

官方 Demo 地址:https://sivan.github.io/heti/

国标引号

开发者您好,感谢您对项目的辛勤付出!

heti/lib/_inline.scss

Lines 83 to 91 in c58ee4a

// 设置引用文本为中文引号
q {
quotes: "" "" "" "";
@include non-cjk-block {
quotes: initial;
quotes: auto;
}
}

根据中华人民共和国国家标准GB/T 15834-2011《标点符号用法》,第4.8节、5.2.3节,引号在横排文稿中应为“弯引号”,在竖排文稿中应为『双引号在外,「单引号」在内』。请问是否考虑新增标签选项以兼容国标?谢谢!

License?

Hi

首先赞美一下这个项目的出众效果 :)

不过我看项目中并没有 License File

只是 package.json 里面写了一个 MIT

所以:是不是决定用 MIT License 呢?
无论是用什么 License 还是显式的声明成 License File 比较好吧?

autoSpacing not working

autospacing

我给文章部分加上了 heti class,可以看到 heti--classic 的样式生效了。

按照说明,我在 </body>之前加上了增强脚本的调用,可是却没有生效。

<heti-adjacent class="heti-adjacent-half"></heti-adjacent> 没有自动插入标点符号之间。
html
punctualation

在 Chrome 和 Safari 上都没有生效。

[Feature Request]请问是否能加入对于KaTeX中加中英文间空隙的支持?

现在非常神奇的对于某些KaTeX公式也能支持,但是对于复杂的就不行。

而且其实我注意到现在的 heti-space 会放到KaTeX元素的内部,这可能会带来公式渲染的一些问题比如$xyz\text{下}\sum_{i=1}^{n} s_i$
是否有方法改进或者有方法在 KaTeX 中屏蔽?

示例

公式前$x\sum_{i=1}^{n} s_i$后 (此例没有空格)
公式前$x$后 (此例电脑chome正常,但在ipad上浏览器打开不正常,x前的空格更大)

$\underset{\text{价格为}s\text{时最优生产方案下的净利润}}{f^{*}(s)} = \sup_{x \in E } { \underbrace{\left< s,x \right>}{总销售额} - \underbrace{f(x)}{\text{生产}x\text{时的生产成本}}} $ (此例电脑chome正常,但在ipad上浏览器打开不正常,x前的空格更大)

公式前$xyz\text{中}\sum_{i=1}^{n} s_i$后 (此例x后多出一个空格)

使用前

Screenshot_20221116_101625
Screenshot_20221116_103300
Screenshot_20221116_104303

使用后

Screenshot_20221116_100826

Screenshot_20221116_102937

Screenshot_20221116_104148

能否提供不格式化pre和code的选项

如题,能否定义一个变量来控制是否给pre和code标签增加样式?我现在一个渲染Markdown的地方配置了heti,发现代码高亮的主题失效了,code、pre的background-color被heti覆盖了。

[Bug] 宋体强调没有加粗

image

然而如果我手动将 --classic CSS 选择器中的 "Heti Song" 换为 "Songti SC Regular", "Songti TC Regular", "SimSun",则可以显示加粗效果:

image

夜间模式覆盖了普通模式的原有样式

我觉得可能是我自己问题,不想污染Issue。本来想提一个Discussion的,但是这个仓库没有。
首先无论能不能解决,都感谢开发者肯看我的问题,谢谢了

问题如图:

明亮模式image

夜间模式

image

滚动条样式

你好
请问最右侧的滚动条样式能不能也统一一下?

image

谢谢

有在 Logseq 软件使用的案例么

想在 Logseq 笔记软件中使用这种超级赏心悦目的文本格式,但是本人苦于不会折腾 css,所以叨扰大家,请问有没有可以模仿的案例,然后用于 Logseq 中。谢谢!

[Bug] 楷体显示为宋体

目前楷体常规字重的定义如下:

@font-face {
  font-family: "Heti Kai";
  src: local("Kaiti SC Regular"), local("Kaiti TC Regular"), local("BiauKai");
}

whatfontis.com 显示前两个字体来自 iOS,第三个字体来自 MacOS。在我的电脑(Windows 10)上没有发现这三个字体。

我目前的解决方案是:把楷体的 @font-face 修改为

@font-face {
  font-family: "Heti Kai";
  src: local("Kaiti SC Regular"), local("Kaiti TC Regular"), local("STKaiti"), local("Kaiti"), local("BiauKai");
}

即可。其中 STKaiti 是华文楷体(C:\Windows\Fonts\STKaiti.ttf),来自 Office;Kaiti 的字体来源为 Windows 自带的字体库中的「楷体 常规」(C:\Windows\Fonts\SimKai.ttf)。

这里的问题是:STKaitiKaiti 的字重比较单一,二者的 600800 字重显示效果完全一样。

如果作者认为这个更改合理,我可以提供 PR。

使用 zh-Hant 字體時,Font kerning 的標題擠壓不合預期。

zh-Hant 之逗號、句號、分號及冒號置中。目前的樣式規則,是不論標點是否置中都往右邊壓 0.5em,這就和 zh-Hant 的書寫規範衝突了。

目前顯示效果

句號和引號結尾過近,閱讀上相當不適。

CleanShot 2023-09-29 at 19 49 53@2x

預期顯示效果

句號左右各壓 0.25em(可適度調整,我自己是調 0.2em:0.3em),效果明顯比上方舒適得多:

CleanShot 2023-09-29 at 19 58 18@2x

支持思源宋体

https://github.com/sivan/heti/blob/master/lib/fonts/_hei.scss 中的思源黑体和 Noto Sans 替换为对应的宋体版本名称,再加入 https://github.com/sivan/heti/blob/master/lib/fonts/_song.scss 即可。

如果需要为低分屏使用 SimSun 的点阵版本,可以尝试使用 @media,只为高分辨率屏幕使用这些字体。

如果愿意,也可以考虑支持更纱黑体
以及向 https://github.com/sivan/heti/blob/master/lib/fonts/_kai.scss 中加入更多字体,比如 SimKai 和 StKaiTi(华文楷体),改善匹配概率。

Non-character behaviour for styled quote

<q></q> effectively inserts 「」 or "" around a quote, depending on the context, but the inserted symbol can't be selected or copied like normal characters. Is this an expected behaviour?

Reproduce screenshot:
image
image

最新的 Chrome 下 Demo 竖排显示异常

Demo https://sivan.github.io/heti/ 中,竖排排版在 Chrome 下字体互相挤压,且在刷新后或是在没有缓存的隐身模式中打开此页后仍有此问题存在

Screenshot: Screenshot from 2021-01-15 04-15-13

OS: Arch Linux uname -a: Linux dell 5.10.5-arch1-1 #1 SMP PREEMPT Thu, 07 Jan 2021 09:50:43 +0000 x86_64 GNU/Linux

Chrome: google-chrome-stable --version: Google Chrome 87.0.4280.141

Browser console 中没有 log 出现

Set correct lang for <rt> tag?

目前 <rt> 標籤繼承了預設的 lang 屬性,即 zh-Hans;但對於拼音而言,應該將 lang 屬性設定為 zh-Latn,因為這會影響瀏覽器的字型選擇由於 locl 特性,某些字型在 zh-Hanszh-Latn 下的顯示效果可能不同。

图片超出背景

你好,
当图片分辨率过大时, 会超出显示区域。能否自动进行等比例缩放,如果超出大小就按照显示区域的最大可显示宽度显示?

image

斜体显示为黑体

在我的博客一篇博文中,原文用* *标注的斜体被显示为黑体

请参见下方comment中图片,博客平台为Jekyll

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.