「Zim」- 为图片设置边框

  CREATED BY JENKINSBOT

问题描述

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 – a desktop wiki/Config Files