Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve font settings #8036

Open
88250 opened this issue Apr 19, 2023 · 34 comments
Open

Improve font settings #8036

88250 opened this issue Apr 19, 2023 · 34 comments
Assignees
@88250 @Vanessa219
Labels
Enhancement

Comments

@88250
Copy link
Member

88250 commented Apr 19, 2023

Appearance

  • Support setting interface font

Editor

  • Support setting editor font
  • Support setting the editor monospace font

Fonts

  • Support setting multiple fonts
  • Support preview
@mozhux
Copy link

mozhux commented Apr 19, 2023

设置多种字体是支持分别设置中英文字体、数字公式字体、代码块字体？

@88250
Copy link
Member Author

88250 commented Apr 19, 2023 •
edited
Loading

  • 多个字体设置就包含了中英文了，就是 font-family 里面出现的列表
  • 公式没有字体设置，是 KaTex 渲染的
  • 行级代码和代码块用等宽字体（Monospace）

@mozhux
Copy link

mozhux commented Apr 19, 2023

好的，支持移动端吗

@88250
Copy link
Member Author

88250 commented Apr 19, 2023

目前还不确定能否支持，后面研究一下，主要是看能否在移动端读取和解析系统字体列表。

@Zuoqiu-Yingyi
Copy link
Contributor

  • Support setting interface font
  • Support setting editor font
  • Support setting the editor monospace font
  • Support preview

目前这些功能均已通过插件实现

  • Support setting multiple fonts

编辑器支持多字体可能需要本体继续改进

@88250
Copy link
Member Author

88250 commented Oct 18, 2023

弱弱滴问一下，这个目前已经完全能够通过插件支持了吗？

@Zuoqiu-Yingyi
Copy link
Contributor

弱弱滴问一下，这个目前已经完全能够通过插件支持了吗？

编辑器多字体还不支持，也没用比较优雅的插件实现方案

@88250
Copy link
Member Author

88250 commented Oct 19, 2023

你指的是哪种情况，目前插件主要受限于？

@Zuoqiu-Yingyi
Copy link
Contributor

Zuoqiu-Yingyi commented Oct 19, 2023 •
edited
Loading

你指的是哪种情况，目前插件主要受限于？

编辑器中字体在样式标签 style#editorFontSize 中定义, 该样式标签由思源根据用户设置覆盖式更新

@Vanessa219
Copy link
Member

是需要一个字体设置的接口来修改这些字体就可以了么？

@Zuoqiu-Yingyi
Copy link
Contributor

是需要一个字体设置的接口来修改这些字体就可以了么？

仅需要添加一个 CSS 变量 --b3-font-family-protyle 替代 #editorFontSize 中的字体列表, 这样用户就可以通过主题/代码片段/插件覆写该 CSS 变量实现自定义字体列表

Vanessa219 added a commit that referenced this issue Oct 23, 2023
@Vanessa219
🎨 #8036
15e40d2
@Vanessa219
Copy link
Member

调整了一下顺序，代码片段中直接加是可以使用的，这样是不是就不需要 --b3-font-family-protyle 了？

.protyle {font-family: mononoki}

@Zuoqiu-Yingyi
Copy link
Contributor

调整了一下顺序，代码片段中直接加是可以使用的，这样是不是就不需要 --b3-font-family-protyle 了？

.protyle {font-family: mononoki}

还是需要的，用于显式指定字体列表，而不是用户自己设置自己的样式，否则可能导致优先级不一致无法正常覆盖

@Vanessa219
Copy link
Member

如果插件中自己加入 CSS 变量是有什么问题么？

@Zuoqiu-Yingyi
Copy link
Contributor

如果插件中自己加入 CSS 变量是有什么问题么？

不能知道所需覆盖的选择器的优先级，进而不能确保样式生效

@Vanessa219
Copy link
Member

优先级从上往下分别为：代码片段、设置中字体设置、默认主题
image

@Zuoqiu-Yingyi
Copy link
Contributor

优先级从上往下分别为：代码片段、设置中字体设置、默认主题 image

我是指 CSS 选择器的优先级

Vanessa219 added a commit that referenced this issue Oct 25, 2023
@Vanessa219
🎨 #8036 fix https://ld246.com/article/1698243367105
e50f23b
@Vanessa219
Copy link
Member

选择器使用了变量，优先级不够也不行，不太理解为什么要加变量，官方要如何加？

@Zuoqiu-Yingyi
Copy link
Contributor

选择器使用了变量，优先级不够也不行，不太理解为什么要加变量，官方要如何加？

就是在 style#siyuanStyle 以如下格式设置字体列表并将其设置为 <head> 标签最上方的样式

.b3-typography:not(.b3-typography--default),
.protyle {
    font-family: var(--b3-font-family-protyle), "用户自定义字体", var(--b3-font-family);
}

然后在默认主题中设置 CSS 变量 --b3-font-family-protyle

:root {
    --b3-font-family-protyle: none;
}

这样主题/插件样式/用户代码片段等等仅需要设置 CSS 变量 --b3-font-family-protyle 即可使用自定义的字体列表, 若未设置则可以回退到字体 "用户自定义字体"

Vanessa219 added a commit that referenced this issue Oct 27, 2023
@Vanessa219
🎨 #8036
633f9af
Vanessa219 added a commit that referenced this issue Oct 27, 2023
@Vanessa219
🎨 #8036
72d828d
@Vanessa219
Copy link
Member

哦，大概明白了，dev 修改了，麻烦看看是否可以支持了？

@Zuoqiu-Yingyi
Copy link
Contributor

哦，大概明白了，dev 修改了，麻烦看看是否可以支持了？

目前 <style> 与 <link> 标签的顺序还有一些问题, 理想情况下在 <head> 标签里面应按照如下顺序排列才能有正确的优先级

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <link id="themeStyle">
  • <style id="snippet...">

@Vanessa219
Copy link
Member

第三方主题的优先级应该低于插件和系统设置。我先调整一下 pluginsStyle 的位置

Vanessa219 added a commit that referenced this issue Oct 29, 2023
@Vanessa219
🎨 #8036
b8f56f4
@Zuoqiu-Yingyi
Copy link
Contributor

Zuoqiu-Yingyi commented Oct 29, 2023 •
edited
Loading

第三方主题的优先级应该低于插件和系统设置

不不, 第三方主题优先级应该处于高于插件和系统设置, 低于代码片段的位置

  1. 只听说过主题适配某个插件的样式, 没听说过插件适配所有主题的样式
  2. 主题优先级高于系统设置才能实现覆盖系统设置中部分样式

@Vanessa219
Copy link
Member

系统设置是比较重要的，不应该被覆盖。

@Zuoqiu-Yingyi
Copy link
Contributor

那第三方主题样式优先级也应该高于插件样式

@Vanessa219
Copy link
Member

系统设置高于第三方主题，插件高于系统设置，那么第三方主题无法高于插件

@Zuoqiu-Yingyi
Copy link
Contributor

系统设置高于第三方主题，插件高于系统设置，那么第三方主题无法高于插件

这里为啥插件样式又能高于系统设置?

@Vanessa219
Copy link
Member

你自己写的呀
image

@Zuoqiu-Yingyi
Copy link
Contributor

你自己写的呀 image

我还写了 themeStyle 同时高于 pluginsStyle 与 siyuanStyle 👀

@Vanessa219
Copy link
Member

Vanessa219 commented Oct 29, 2023 •
edited
Loading

这个是基于前面讨论的
image

其实可以按照大部分用户的使用顺序来进行理解，也可以按照用户的难易程度来进行排序，同时还可以使用 style 高于 link 的规则来进行辅助排序。

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <link id="protyleHljsStyle">
  • <link id="themeStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <style id="snippet...">

@Zuoqiu-Yingyi
Copy link
Contributor

其实可以按照大部分用户的使用顺序来进行理解，也可以按照用户的难易程度来进行排序，同时还可以使用 style 高于 link 的规则来进行辅助排序。

这里规则应该让步于需求场景
目前的需求场景如下

  • 社区开发者有覆盖 siyuanStyle, themeDefaultStyle 与 base.xxx.css 的需求, 否则只能引入 !important
  • 主题开发者有覆盖 pluginsStyle, siyuanStyle, themeDefaultStyle 与 base.xxx.css 的需求, 否则只能引入 !important
  • 代码片段同时有覆盖 themeStyle, pluginsStyle, siyuanStyle, themeDefaultStyle 与 base.xxx.css 的需求, 否则只能引入 !important

如此看来, 下方的顺序是合理的

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <link id="themeStyle">
  • <style id="snippet...">

@Vanessa219
Copy link
Member

社区开发者既然有覆盖 themeDefaultStyle 的需求，为什么就没有覆盖 themeStyle 的需求呢？

其实你可以再换个角度这样来理解：某一个主题突然变成了官方主题，他就会成 从 themeStyle 变为 themeDefaultStyle 了，当然也可能从 themeDefaultStyle 变为 themeStyle。这样一来，按照以下顺序无论怎么变都不会影响到用户。

  • <link href="base.xxx.css">
  • <link id="themeDefaultStyle">
  • <link id="protyleHljsStyle">
  • <link id="themeStyle">
  • <style id="siyuanStyle">
  • <style id="pluginsStyle">
  • <style id="snippet...">

@Vanessa219 Vanessa219 mentioned this issue Oct 29, 2023
Closed
@Zuoqiu-Yingyi
Copy link
Contributor

Zuoqiu-Yingyi commented Oct 29, 2023 •
edited
Loading

社区开发者既然有覆盖 themeDefaultStyle 的需求，为什么就没有覆盖 themeStyle 的需求呢？

因为可以直接使用 :root[theme="foo"] 选择器以更高的优先级指定覆盖某一主题的样式

@Zuoqiu-Yingyi
Copy link
Contributor

其实你可以再换个角度这样来理解：某一个主题突然变成了官方主题，他就会成 从 themeStyle 变为 themeDefaultStyle 了，当然也可能从 themeDefaultStyle 变为 themeStyle。这样一来，按照以下顺序无论怎么变都不会影响到用户。

这种情况不会发生，因为官方主题仅定义了一系列 CSS 变量，而社区主题还有一大堆调整的样式

@Zuoqiu-Yingyi Zuoqiu-Yingyi mentioned this issue Oct 30, 2023
Closed
4 tasks
appdev pushed a commit to appdev/siyuan-unlock that referenced this issue Oct 31, 2023
@Vanessa219 @appdev
🎨 siyuan-note/siyuan#8036 fix https://ld246.com/article/1698243367105
fde1488
appdev pushed a commit to appdev/siyuan-unlock that referenced this issue Oct 31, 2023
@Vanessa219 @appdev
🎨 siyuan-note/siyuan#8036
ea42d70
appdev pushed a commit to appdev/siyuan-unlock that referenced this issue Oct 31, 2023
@Vanessa219 @appdev
🎨 siyuan-note/siyuan#8036
3166899
appdev pushed a commit to appdev/siyuan-unlock that referenced this issue Oct 31, 2023
@Vanessa219 @appdev
🎨 siyuan-note/siyuan#8036
acf364b
appdev pushed a commit to appdev/siyuan-unlock that referenced this issue Nov 13, 2023
@Vanessa219 @appdev
🎨 siyuan-note/siyuan#8036
eda92d2
@Vanessa219 Vanessa219 mentioned this issue Nov 23, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@88250 88250

@Vanessa219 Vanessa219

Labels
Enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@88250 @Vanessa219 @mozhux @Zuoqiu-Yingyi