行内代码过长时奇怪的断行渲染方式

如题,见下图,默认主题。

图片.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19828 引用 • 75925 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • @Vanessa 这个没办法改进吗?

  • 88250

    这是个已知问题,请参考 Issue #8104 · siyuan-note/siyuan

  • Achuan-2 2 2 赞同

    默认主题

    Clip20240427221711.png

    Clip20240427223251.png

    自定义代码

    .b3-typography code:not(.hljs),
    .b3-typography span[data-type~='code'],
    .protyle-wysiwyg code:not(.hljs),
    .protyle-wysiwyg span[data-type~='code'] {
    
        word-break: break-all;
    
    }
    

    Clip20240427221756.png

    Clip20240427223315.png

    @88250 用 word-break: break-all;就能解决这个问题,只不过不会按单词分割,但是我觉得行内代码本身就有底纹,不按单词分割也没什么,是可以明确知道上一行和下一行有没有空格的,不会造成歧义,我自己使用过程中没发现过有所影响。类似的还有超链接。

    正文要 break-word 我能理解,但像这种特殊样式,本身就可以靠格式独立出来,break-all 的体验更好其实,我自己用的 Tsundoku 主题就一直用的 break-all。

    break-word 反而有时候会莫名奇妙的分行看的还不舒服。因为本身 inline-code、inline-hyperlink,就是行内元素,预期用户输入的就是单行文字,反而因为 break-word 被分割渲染看起来变成了多行。另外,break-word 也不能保证一定按单词分割,行内代码除了代码之外,另一个广泛的用法就是放路径了,对于一般没有空格的长路径,可是直接识别成一个单词的,这时候效果就会很不好,直接前面断了一行。(notion 之类的是不支持直接编辑行内代码左侧,所以问题不太大,而语雀用的就是 break-all)

    Clip20240427231256.png

    虽然主题\自定义代码可以做到,不过建议官方考虑一下能否采用这种方案,我是觉得适用于大多数人的,不至于让普通用户困惑。其他用户如果不喜欢 break-all,也可以自定义代码实现 break-word

    3 回复
    5 操作
    Achuan-2 在 2024-04-27 23:18:32 更新了该回帖
    Achuan-2 在 2024-04-27 23:14:23 更新了该回帖
    Achuan-2 在 2024-04-27 22:42:46 更新了该回帖
    Achuan-2 在 2024-04-27 22:33:30 更新了该回帖 Achuan-2 在 2024-04-27 22:29:28 更新了该回帖
  • 超链接应该还是不行,超链接的锚文本不一定是链接本身

    不过换句话说,如果能判断超链接的锚文本是链接本身就行了

    1 回复
  • Achuan-2 1 赞同

    break all 和 break-word 在中文场景下区别不大,英文场景下才有区别。我之前之所以给主题的超链接加 break-all,主要是因为也是有行内代码的问题,如果一个链接的长锚文本被识别一个单词,就会直接与普通文本分行,特别难受。

    Clip20240427232432.png

    如果是普通段落,其实 break-word 就还可以。

    Clip20240427224812.png

    3 操作
    Achuan-2 在 2024-04-27 23:25:09 更新了该回帖
    Achuan-2 在 2024-04-27 23:07:45 更新了该回帖
    Achuan-2 在 2024-04-27 23:04:47 更新了该回帖
  • 我试了下好像不行,还是会有残留的零宽字符在上面。单词被隔断看着很不舒服。

    image.png

    2 回复
  • Achuan-2 1 赞同 2 评论

    这个是正好行内代码就在行末尾导致的的吧,应该情况比较少,大家遇到的残留零宽字符更多是在句子中间就被 break word 打断了,非常突兀。我觉得行内代码主要用来标记代码和路径以及数字、字符串,而不是一个长段落,被打断对我而言无所谓,我也更倾向于渲染效果比较规整的结果,一行只有一半就自动换行反而是一件更受不了的事情。如果行内代码的内容没有空格的话,break word 一般都是把整体看成一个单词的,导致过长就直接分行了。

    语雀貌似不会有这个问题,不知道怎么实现的。此外语雀的行内代码就是用的 break all,我把它改成 break word,昨天测试的时候并没有发现残留零宽字符

    1 回复
    1 操作
    Achuan-2 在 2024-04-28 14:16:04 更新了该回帖
    楼主中的图片和 issue 中说的应该是残留问题,这个调整编辑器宽度应该可以重现。代码里面大部分都是英文,截断感觉会影响阅读。
    Vanessa
    @Vanessa 截断这个看个人喜好了,就不多说了。语雀那个机制 V 姐有研究过吗,我又测试了下,发现确实看不到语雀有思源这种问题,即使把 break-all 改成 break word。语雀也是支持直接在行内代码开头补充内容的
    Achuan-2
  • 3Woods 3 评论

    即便行内代码不在末尾也会有这个问题 😂 。

    图片.png

    楼主中的图片和 issue 中说的应该是残留问题,这个调整编辑器宽度应该可以重现。代码里面大部分都是英文,截断感觉会影响阅读。

    另外也不光是残留的问题,虽然调整宽度可以避免断行,但是在屏幕大小限制(比如移动端),或者需要导出 pdf 时很影响排版美观。😭

    你应该回复 V 姐的,我回复她的那个是说用 break-all 语法为什么也会出现残留零宽字符,用 break-word 就是可能会把行内代码识别为一个单词不打断导致分行。 确实需要的话把我前面的 css 代码片段加入外观设置就好了
    Achuan-2
    JeffreyChen
    导出的时候可以处理一下。移动端估计就没有办法了
    Vanessa
  • Achuan-2 1 1 赞同 3 评论

    我看了下语雀的 DOM 结构,发现语雀的零宽字符是单独用 span 标签包裹的

    image.png

    而使用的零宽字符直接就放在了内容的最左侧

    估计是这个原因,break-word 识别零宽字符是一个单词,后面的长字符串为一个单词,然后就被分割了。不知道思源有没有办法改进下。

    Clip20240428221652.png

    我发现估计是使用的零宽字符的缘故,V 姐试试改用语雀的那种零宽字符,我直接在 DOM 改零宽字符貌似就没有出现残留了!

    @Vanessa

    修改语雀 DOM 用思源的零宽字符,也会出现这个问题

    Clip20240428223517.png

    思源改之前

    Clip20240428223912.png

    改之后

    Clip20240428224011.png

    确实就不会在上一行残留一点点背景了,但是貌似发现了一个缺点——下一行好像会多一个字,语雀由于是 break-all 就没有这个问题

    1 回复
    DOM 结构改不了了。
    Vanessa
    @Vanessa 零宽字符能改吗 我的意思是改成语雀的零宽字符
    Achuan-2
    @Achuan-2 可以改的,但是用的地方比较多,还需要看其他地方有没有问题。我先建个 issue Issue #11248 · siyuan-note/siyuan
    Vanessa
  • 大佬牛批,感谢大佬!

    感觉改零宽字符是个办法。


    我发现在设置里面把两侧对齐打开就会好一些,也可以避免行内代码截断(缺点就是字少的时候一行会很稀疏)。另外就是会有一点背景残留,但是改为 @Achuan-2 说的那种零宽字符后,就不会有残留了,确实是个可行的办法。

    图片.png

    1 回复
    1 操作
    3Woods 在 2024-04-28 23:43:13 更新了该回帖
  • 在官方没改进之前,你可以尝试用我的 Tsundoku 主题,主题对行内代码设置了 break all 的,如果不在意分割单词的话

    1 回复
  • 感谢!已经用上了你前面的代码片段,哈哈

    1 回复
  • ok,不客气

请输入回帖内容 ...

推荐标签 标签

  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    84 引用 • 122 回帖 • 620 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 708 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 355 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    536 引用 • 672 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 82 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 611 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    28 引用 • 108 回帖
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    328 引用 • 1706 回帖
  • gRpc
    10 引用 • 8 回帖 • 53 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 408 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖 • 1 关注
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    484 引用 • 906 回帖
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 19 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖 • 1 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 607 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 59 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1398 回帖
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    74 引用 • 157 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 62 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 446 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 635 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    71 引用 • 1736 回帖 • 6 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    175 引用 • 992 回帖