「Zim」- 为图片设置边框 @20210314

问题描述

在 Zim 中，当在页面中插入图片后，由于页面是白色的，并且图片背景也是白色的，导致我们无法直观的看出图片与段落的距离。在这种情况下，图片与段落可能间隔一行，也可能间隔两行，这对页面的排版造成影响。

我们希望，直接看到图片与段落的间隔。比如：通过为图片设置边框（Border）等方式，来凸显图片的边界。

该笔记将记录：在 Zim 中，如何突出显示图片（以明确图片与段落的间隔），以及常见问题的处理。

解决方案

方案一、修改页面背景色

通过设置页面的背景色，页面与图片的形成反差，将显示出图片的边界：

/* 在 ~/.config/gtk-3.0/gtk.css 中，添加如下配置 */
#zim-pageview text {
    background-color: darkseagreen; /* changes the background color of the Zim's page editor */
    /* color: #BABABA; */ /* foreground text color */
}

但是，该方法的局限性在于：如果图片为 PNG 透明图片，则图片将显示页面的背景色（因为是透明的），无法达到我们的目的。

方案二、为图片设置边框

我们可以为图片添加边框，这样便可看到图片的边界，区分出段落与图片的距离：

/* 在 ~/.config/gtk-3.0/gtk.css 中，添加如下配置 */
#zim-inserted-object {
    border: 2px solid #ccc;
}

但是，该方法的局限性在于：“通过插件插入的图片”（比如 Graphviz、Sequence Diagram 等等）能够显示该边框，但是直接插入的图片无法显示边框。这与 Zim 实现有关：通过插件插入的图片，是通过 Gtk.Image() 与 Gtk.VBox() 插入 TextBuffer 的，而样式则是添加到 Gtk.VBox() 控件上；直接插入的图片，是通过 Pixbuf 插入到 TextBuffer 中的，没有设置边框；

方案三、修改图片插入实现（方案二的补充）

问题描述：普通图片没有边框，是因为图片是作为 Pixbuf 直接插入 TextBuffer 的。通过插件生成的图片，是使用 ImageFileWidget 插入 TextChildAnchor 的。而 CSS 之添加到 ImageFileWidget 上的，没有添加到 Pixbuf 上（我们也没有知道相关的方法）。

TODO !!! Zim 为普通图片添加边框："zim-inserted-object" doesn't work for normal images. · Issue #1421

相关文章

「Zim」- 在笔记中添加插图

参考文献

Zim - a desktop wiki/Config Files