一千萬個為什麽

搜索

自定義項目符號html電子書kindle



我正在為亞馬遜的Kindle創建一本電子書,然後使用KindleGen將其轉換為Kindle的MOBI版本。

我目前遇到的問題是用於嵌套無序列表的自定義項目符號,我正在使用它來編寫電子書的目錄。最初我在list-style-image屬性中使用圖像來創建自定義項目符號。這是我使用的CSS:

ul.customBullet
{
    list-style-image: url('images/bulletPointImage.png');
    margin:1.3em;
}

這是html:

  • Text 1

  • <!-- 1st tier -->
    • 2:

      <1-- 2nd tier -->
      • Text 3
        <!-- 3rd tier -->
        • Text

        • <!-- 4th tier -->
    • 3:
    • 4:
    • 5:
    • 6:
    • 7:

我在將子彈與文本對齊時遇到問題。文本顯示在子彈的下方一行,稍微向左,不像旁邊那樣(在Firefox中)。當我在KindlePreviewer中預覽用KindleGen創建的MOBI時,子彈的圖像很小(與圖像文件不成比例),而且子彈的相同問題與文本不在同一行。

此外,子彈在每種不同的kindle模型(Kindle Paperwhite,Kindle Fire等)中的顯示方式不同,圖像的大小各不相同,子彈和文本之間的間距也有所不同。

然後,我在網上閱讀Kindle不支持list-style-image標簽的地方。 Kindle的官方支持的CSS標簽也不包括它。所以我創建了一個沒有CSS的簡單項目符號列表,但是使用了上面相同的HTML代碼。問題與間距相同。每層上都會出現不同形狀的子彈。例如第一個是空心的圓形,第二個是方形的,依此類推。

所以,我的問題是,有沒有一種方法(任何代碼行)在kindle的電子書的html中制作精簡的項目符號,而在不同版本中沒有所有這些變化,並且也沒有所有這些不必要的空間插入以及適當的定位。無論使用何種kindle版本的子彈都保持不變。希望我已經正確地解釋了自己。

轉載註明原文: 自定義項目符號html電子書kindle

一共有 1 個回答:

There are a few things going on here. The spacing issue is likely being caused by the presence of block elements inside list elements—the headers are probably getting bumped onto their own line, apart from the start of the list item. If you're starting with the toc.xhtml of an epub file, you'll need to lose any elements inside the Table of Contents list (which must be in a