「Zim」- 爲圖片設置邊框 @20210314

問題描述

在 Zim 中，當在頁面中插入圖片後，因爲頁面是白色的，而且圖片背景也是白色的，致使咱們沒法直觀的看出圖片與段落的距離。在這種狀況下，圖片與段落可能間隔一行，也可能間隔兩行，這對頁面的排版形成影響。

咱們但願，直接看到圖片與段落的間隔。好比：經過爲圖片設置邊框（Border）等方式，來凸顯圖片的邊界。

該筆記將記錄：在 Zim 中，如何突出顯示圖片（以明確圖片與段落的間隔），以及常見問題的處理。

解決方案

方案1、修改頁面背景色

經過設置頁面的背景色，頁面與圖片的造成反差，將顯示出圖片的邊界：

/* 在 ~/.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 透明圖片，則圖片將顯示頁面的背景色（由於是透明的），沒法達到咱們的目的。

方案2、爲圖片設置邊框

咱們能夠爲圖片添加邊框，這樣即可看到圖片的邊界，區分出段落與圖片的距離：

/* 在 ~/.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 中的，沒有設置邊框；

方案3、修改圖片插入實現（方案二的補充）

問題描述：普通圖片沒有邊框，是由於圖片是做爲 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