【已解决】实时模式下,列表内换行对齐问题

遇到的问题

b5eb0cb25dc5d701d2b801de6f007873

左实时中源码右阅读,上ty下ob。

预期的效果是列表的内换行可以对齐

这或许是能修复的

fea1acd7628e8a51baa7f0a96a403f62

就是说他这个text-indent的值在实时模式下设置得不是很准的样子 (可以通过修改绿框那个值校正),你们的也是这样吗?还是说有哪个主题修复了这一点?

补充另一种解法

当然,另一种写法是可以对齐的:

图片

但是我想让原来的写法也能够对齐,并不想写br标签。

  1. 首先,他既然能够在源码模式和阅读模式下对齐,在实时模式下对齐应该是预定的情况
  2. 我不理解他那个 -31px 和第二行 -19px 是怎么设定来的:
  • -19px 是正常的前面有两个空格的缩进情况(obsidian是按行解析的,读到第二行时他并不认为这是列表的一部分),所以这个值我们不去动他
  • -31px 这个值的设定应该就是为了怎么好看怎么设的,并没有考虑到和列表内换行之间的对齐
    图片

最后,再补充一下空格数和制表符的问题:就是列表缩进时他是知道这个缩进是由四空格来的还是由几空格来的(不同空格时缩进px不同)

先看有无现成的主题或css片段,没有的话过段时间我看看自己能不能解决吧

之前有人问过,用css可以差不多解决

三个模式的渲染逻辑都是不一样的,不能相互比较;
总之ob就是在渲染逻辑上简化了,使得部分样式无法对齐
很多问题都是类似的,不清楚是兼容性问题还是速率问题还是官方懒得做,就比如引用的语法,最后一定需要空开一行,就是为了保证多平台迁移的兼容性

主要是我看起来这是可解的,并不是由于ob实时模式的底层有什么原因导致不能这样做。

但事实上又没谁的主题去解决这个问题,就感觉有点奇怪。

发过来的那个帖子的css似乎还是有问题,我在尝试自己写一下

可解是一定可解的,但需要看性能花费是否值得
不仅是单一个页面,不同缩放比例,不同字体大小都需要兼容,开销就很大了,不可能花几KB去存一套策略只为了对齐,所以很少人做就是了,最优的方法就是个人自己添加css适配自己的情况

图片依然是左中右:源码 实时 阅读

全部css:

/**
 * 二格缩进
 *
 * text-indent 和 padding-inline-start 的区别:是否影响起始光标的位置
 */

.cm-formatting.cm-formatting-list.cm-formatting-list-ul { /* 无序列表圆点 */
  padding-left: 0;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ol { /* 有序列表数字 */
  padding-left: 0;
}

怎么前面一篇帖子搞得很复杂的样子,需求不一样吗


后来补充:发现在沙箱使用失效。研究发现还需要一个字母等宽的字体或是再加两行CSS,详情往下翻,有完整的CSS

后面都加 !important 看看,或者 Ctrl+Shift+I 看看有没有生效,我也是1.6.7

啊,不对,源码应该是这种规范吧:

- dfd
  这里前面的空格等于上面 `-` 的空格加两个空格
    - 这里`-`前面四个空格
      这里前面就应该是六个空格
  - 如果列表`-`是两个空格也是同理
    这里前面四个空格

为什么是这种写法?

  1. md源码模式下也是对齐的,也是符合规范的
  2. typora的Shift+Enter也是会自动生成这种空格情况

安啦,其实你可以想一下,如果是空两个空格那如果是有序列表岂不是就缩不进去了吗。

1. dfd
  你好

如果说要研究这个列表对齐的问题,我知道一个叫 Outliner.MD 的 Ob 插件有个大纲视图是专门搞这个的,GitHub 上能搜到,应该是没放源码,你可以看看能不能联系作者问问。

刚发现我沙盒也无效hhhh,但我原来的仓库把插件和主题和其他CSS样式关了也生效,我调试一下先

有序列表是三空格,两个数字的有序列表是四空格。Typora自动生成的前置空格数是这个规律,在源码模式下也是对齐的

我知道了

换用等宽字体解决

需要一个等宽字体(不知道为什么我切换回默认主题和关闭CSS后字体居然没有失效)

等宽字体就是指英文的宽度是一样的,而不是不同的,例如上面的是Spectrum主题,下面是默认的(主题不重要,具体的字体也不重要,只要字体的等宽就行了,这个主题用的字体叫 JetBrains Mono

图片

如果想使用这种字体,可以加一句:

* {
    font-family: JetBrains Mono;
}

不换用字体的方法

其实我觉得不用等宽字体也是能解决的,需要等宽字体的原因应该是,默认的 - 的宽度和空格的宽度不一致(- 的宽度要更宽)

图片

,如果依旧需要在不等宽字体中生效,解决方法是修改 - 的宽度使之与空格一样。

方法总结:

/**
 * 缩进对齐
 *
 * text-indent 和 padding-inline-start 的区别:是否影响起始光标的位置
 */

/************** 方案一 (设置等宽字体,好处是不用为特定的字体做适配,管你字体的宽度是多少都无所谓,只要等宽就可以通用了) *********************/

.cm-formatting.cm-formatting-list.cm-formatting-list-ul { /* 无序列表圆点 */
  padding-left: 0;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ol { /* 有序列表数字 */
  padding-left: 0;
}

.cm-indent-spacing  { /* 有时不加可以,有时不加不行,不知道为什么 */
  padding-left: 0;
}

/* 修改为任意一个等宽字体 (字母的宽度相同),不一定是下面这个字体。如果你的字体本来就等宽,可以不需要这一步 */
* {
    font-family: JetBrains Mono;
}

/************** 方案二 (只对默认字体生效。缺点是如果你是其他字体,那得自己再去调整数值) *********************/

.cm-formatting.cm-formatting-list.cm-formatting-list-ul { /* 无序列表圆点 */
  padding-left: 0;
  margin-left: -0.15em;
}

.cm-formatting.cm-formatting-list.cm-formatting-list-ol { /* 有序列表数字 */
  padding-left: 0;
  margin-left: -0.22em;
}

.cm-indent-spacing  { /* 有时不加可以,有时不加不行,不知道为什么 */
  padding-left: 0;
}

不用等宽字体也能解决了,见上

挺好的。不过也不能忽略像本话题 #2 引入帖的 #10 提到的问题。

其实主要是各人列表缩进的习惯不同。我看到你说 Typora 会自动加不同数目的空格时候就明白了。在 Ob 里按 tab 缩进是固定空格数的,所以还是个人适配个人需求就好了。

以下是使用 #12 代码在当前及安装程序版本为 v1.6.7、默认主题、默认字体、无安装插件、无额外 CSS 的测试截图。

#11 介绍的 Typora 缩进方法:

测试文本:

1. 面条
   面条
10. 面条
    面条

有序列表两个数字内换行的问题

非等宽字体的适应更麻烦,我的css将 1. 的宽度设置为两空格,但没有将 10. 的宽度设置为三空格,可以自己补上。

两位序号的选择可以通过style属性来选择,类似这样:

div.HyperMD-list-line[style*="text-indent: -12px;"] {} /* 这是默认一位序号 */
div.HyperMD-list-line[style*="text-indent: -21px;"] {} /* 这是默认两位序号 */
div.HyperMD-list-line[style*="text-indent: -30px;"] {} /* 这是默认三位序号 */

不过使用等宽字体就不需要调整这些了,我个人更推荐用等宽字体的方式解决。不然的话如果你的文字大小和以后字体修改了,你还得调。而且其实不用全局更换字体,只换列表字体应该就可以了

有序列表9->10不对齐的问题

很少用到列表10,懒得修了,CSS能解决,方法和前面类似

换行的空格数问题

tab其实不是用来给你列表内换行的,ob本身就没去添加这个特性,那个只是单纯用来给你创建下一个列表而不是创建上一个列表的内换行文本的。typora中使用 shift+enter 完成这一操作,ob没有这个操作。

反正我的用法就是如果我现在这一行要创建一个新的二级列表,那么就 tab+-+空格,如果要创建一个二级列表后面的内换行文本,那么就 tab+空格+空格(假设这里不使用列表创建的快捷键),如果禁用制表符且设置宽度为二,那么也可以 tab+tab

CSS的通用性问题

如果是非等宽字体,根据字体的大小和样式不同,得自己重新调CSS,不通用。但如果是等宽字体,那么都是通用的……