Python制作epub的CSS拼音字宽问题

不努

尝试用Python+AI写个制作epub电子书的程序，实现中文带拼音标注。我希望每个字的间距是一样的，但由于上方拼音长度不同，所以如何调控排版就成了问题。翻来覆去问了不同的AI，似乎都没能运行出想要的效果。
def create_ebook(book_data: dict):
    book = epub.EpubBook()
    book.set_identifier('id123456')
    book.set_title(book_data['title'])
    book.set_language('zh')

    epub_chapters = []
    toc = []
    chapter_counter = 1

    for chapter in book_data["chapters"]:
        content = f"""
        <div class="chapter">
            <h1>{chapter.title['full_text']}</h1>
            <div class="author">
                {chapter.author['full_text']}
            </div>
            <div class="content">
                <div class="line">
                    {chapter.content['full_text']}
                </div>
            </div>
        </div>
        """

        c = epub.EpubHtml(
            title=chapter.title['characters'],
            file_name=f'chapter_{chapter_counter}.xhtml',
            lang='zh'
        )
        c.content = content
        book.add_item(c)
        epub_chapters.append(c)
        chapter_counter += 1

    if epub_chapters:
        toc = [(epub.Section('章节'), epub_chapters)]

    # Add CSS
    style = '''
        @namespace epub "http://www.idpf.org/2007/ops";
        body {
            font-family: "Noto Sans CJK SC", "Source Han Sans CN", SimSun, serif;
            line-height: 2;
            text-align: justify;
        }
        .chapter {
            margin: 2em;
        }
        ruby {
            display: inline-block;
            position: relative;
            align-items: center;
            vertical-align: top;
            width: 3.6em;
            margin: 0 0.1em;
            text-align: center;
        }
        rt {
            display: block;
            font-size: 0.6em;
            letter-spacing: 0.05em;
            height: 1.2em;
            line-height: 1.2;
            overflow: visible;
            white-space: nowrap;
            }
        rb {
            display: block;
            font-size: 1.2em;
            padding-top: 0.2em;
            }
        rt::before {
            content: "";
            display: inline-block;
            width: 3.6em;
            height: 0;
            }
        .line {
            margin: 1.5em 0;
            line-height: 2.5;
            display: block;  /* Changed from flex to block */
        }
        /* New punctuation styling */
        .line > *:not(ruby) {
            display: inline-block;
            vertical-align: bottom;
            font-size: 1.2em;
            line-height: 1;
            margin: 0 0.2em;
            padding-bottom: 1.2em;  /* Align with characters */
        }
        .author {
            font-style: italic;
            margin: 1em 0 2em 0;
        }
    '''


    nav_css = epub.EpubItem(uid="style_nav",
                           file_name="style/nav.css",
                           media_type="text/css",
                           content=style)
    book.add_item(nav_css)

    # Set the table of contents
    book.toc = toc

    # Add default NCX and Nav file
    book.add_item(epub.EpubNcx())
    book.add_item(epub.EpubNav())

    # Create spine
    book.spine = ['nav'] + epub_chapters

    # Write epub file
    output_filename = f"{book_data['title']}.epub"
    epub.write_epub(output_filename, book)
    print(f"Created {output_filename}")


每次得到的结果都长这样，拼音特别长的字（比如霜）两边的空隙就特别大。按我的设想，所有字的拼音都按6个字母宽度来排，这样每两个汉字中线之间的距离应该就是平均的6个字母，但AI怎么改CSS也做不出这个效果。




最后还使了笨办法，把每个拼音都填充空格到6个字母长，得到的效果依旧没有变化。

chapter.title['full_text'] = "<ruby>声<rt>shēng </rt></ruby><ruby>律<rt>  lǜ  </rt></ruby><ruby>启<rt>  qǐ  </rt></ruby><ruby>蒙<rt> méng </rt></ruby><ruby>·<rt>  ·   </rt></ruby><ruby>十<rt> shí  </rt></ruby><ruby>五<rt>  wǔ  </rt></ruby><ruby>删<rt> shān </rt></ruby>"
chapter.author['full_text'] = "<ruby>〔<rt>  　   </rt></ruby><ruby>清<rt> qīng </rt></ruby><ruby>〕<rt>  　   </rt></ruby><ruby>车<rt> chē  </rt></ruby><ruby>万<rt> wàn  </rt></ruby><ruby>育<rt>  yù  </rt></ruby>"
chapter.content['full_text'] = "<ruby>　<rt>  　   </rt></ruby><ruby>　<rt>  　   </rt></ruby><ruby>兴<rt> xīng </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>废<rt> fèi  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>附<rt>  fù  </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>攀<rt> pān  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>露<rt>  lù  </rt></ruby><ruby>草<rt> cǎo  </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>霜<rt>shuāng</rt></ruby><ruby>菅<rt> jiān </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>歌<rt>  gē  </rt></ruby><ruby>廉<rt> lián </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>借<rt> jiè  </rt></ruby><ruby>寇<rt> kòu  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>习<rt>  xí  </rt></ruby><ruby>孔<rt> kǒng </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>希<rt>  xī  </rt></ruby><ruby>颜<rt> yán  </rt></ruby><ruby>。<rt>  　   </rt></ruby><ruby>山<rt> shān </rt></ruby><ruby>垒<rt> lěi  </rt></ruby><ruby>垒<rt> lěi  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>水<rt> shuǐ </rt></ruby><ruby>潺<rt> chán </rt></ruby><ruby>潺<rt> chán </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>奉<rt> fèng </rt></ruby><ruby>璧<rt>  bì  </rt></ruby><ruby>对<rt> duì  </rt></ruby><ruby>探<rt> tàn  </rt></ruby><ruby>镮<rt> huán </rt></ruby><ruby>。<rt>  　   </rt></ruby><ruby>礼<rt>  lǐ  </rt></ruby><ruby>由<rt> yóu  </rt></ruby><ruby>公<rt> gōng </rt></ruby><ruby>旦<rt> dàn  </rt></ruby><ruby>作<rt> zuò  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>诗<rt> shī  </rt></ruby><ruby>本<rt> běn  </rt></ruby><ruby>仲<rt>zhòng </rt></ruby><ruby>尼<rt>  ní  </rt></ruby><ruby>删<rt> shān </rt></ruby><ruby>。<rt>  　   </rt></ruby><ruby>驴<rt>  lǘ  </rt></ruby><ruby>困<rt> kùn  </rt></ruby><ruby>客<rt>  kè  </rt></ruby><ruby>方<rt> fāng </rt></ruby><ruby>经<rt> jīng </rt></ruby><ruby>灞<rt>  bà  </rt></ruby><ruby>水<rt> shuǐ </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>鸡<rt>  jī  </rt></ruby><ruby>鸣<rt> míng </rt></ruby><ruby>人<rt> rén  </rt></ruby><ruby>已<rt>  yǐ  </rt></ruby><ruby>出<rt> chū  </rt></ruby><ruby>函<rt> hán  </rt></ruby><ruby>关<rt> guān </rt></ruby><ruby>。<rt>  　   </rt></ruby><ruby>几<rt>  jǐ  </rt></ruby><ruby>夜<rt>  yè  </rt></ruby><ruby>霜<rt>shuāng</rt></ruby><ruby>飞<rt> fēi  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>已<rt>  yǐ  </rt></ruby><ruby>有<rt> yǒu  </rt></ruby><ruby>苍<rt> cāng </rt></ruby><ruby>鸿<rt> hóng </rt></ruby><ruby>辞<rt>  cí  </rt></ruby><ruby>北<rt> běi  </rt></ruby><ruby>塞<rt> sài  </rt></ruby><ruby>；<rt>  　   </rt></ruby><ruby>数<rt> shù  </rt></ruby><ruby>朝<rt> zhāo </rt></ruby><ruby>雾<rt>  wù  </rt></ruby><ruby>暗<rt>  àn  </rt></ruby><ruby>，<rt>  　   </rt></ruby><ruby>岂<rt>  qǐ  </rt></ruby><ruby>无<rt>  wú  </rt></ruby><ruby>玄<rt> xuán </rt></ruby><ruby>豹<rt> bào  </rt></ruby><ruby>隐<rt> yǐn  </rt></ruby><ruby>南<rt> nán  </rt></ruby><ruby>山<rt> shān </rt></ruby><ruby>。<rt>  　   </rt></ruby>"
求前端专业网友指点迷津

atomicink

Qwen3-235B-A22B测试结果

1. <!DOCTYPE html>
   
2. <html lang="zh-CN">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <title>声律启蒙</title>
   
6.     <style>
   
7.         body {
   
8.             font-family: "KaiTi", "KaiTi_GB2312", "华文楷体", serif;
   
9.             padding: 20px;
   
10.             background-color: #f9f7f3;
    
11.             line-height: 1.8;
    
12.         }
    
13.         
    
14.         .line-container {
    
15.             margin: 1.5em 0;
    
16.             display: flex;
    
17.             justify-content: center;
    
18.             gap: 0.3em;
    
19.             flex-wrap: wrap;
    
20.         }
    
21.         
    
22.         .word-block {
    
23.             display: flex;
    
24.             flex-direction: column;
    
25.             align-items: center;
    
26.             min-width: 2em;
    
27.             position: relative;
    
28.         }
    
29.         
    
30.         .pinyin {
    
31.             font-size: 0.6em;
    
32.             color: #666;
    
33.             margin-bottom: 0.1em;
    
34.             width: 6ch;
    
35.             text-align: center;
    
36.             font-family: Consolas, monospace;
    
37.             white-space: pre;
    
38.         }
    
39.         
    
40.         .hanzi {
    
41.             font-size: 1.8em;
    
42.             font-weight: normal;
    
43.             position: relative;
    
44.             z-index: 1;
    
45.         }
    
46.     </style>
    
47. </head>
    
48. <body>
    
49. 
    
50.     <div class="line-container">
    
51.         <div class="word-block"><div class="pinyin">xīng</div><div class="hanzi">兴</div></div>
    
52.         <div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
    
53.         <div class="word-block"><div class="pinyin">fèi</div><div class="hanzi">废</div></div>
    
54.         <div class="word-block"><div class="pinyin">fù</div><div class="hanzi">附</div></div>
    
55.         <div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
    
56.         <div class="word-block"><div class="pinyin">pān</div><div class="hanzi">攀</div></div>
    
57.     </div>
    
58. 
    
59.     <div class="line-container">
    
60.         <div class="word-block"><div class="pinyin">lù</div><div class="hanzi">露</div></div>
    
61.         <div class="word-block"><div class="pinyin">cǎo</div><div class="hanzi">草</div></div>
    
62.         <div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
    
63.         <div class="word-block"><div class="pinyin">shuāng</div><div class="hanzi">霜</div></div>
    
64.         <div class="word-block"><div class="pinyin">jiān</div><div class="hanzi">菅</div></div>
    
65.     </div>
    
66. 
    
67. </body>
    
68. </html>

复制代码