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>"
求前端专业网友指点迷津
Qwen3-235B-A22B测试结果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>声律启蒙</title>
<style>
body {
font-family: "KaiTi", "KaiTi_GB2312", "华文楷体", serif;
padding: 20px;
background-color: #f9f7f3;
line-height: 1.8;
}
.line-container {
margin: 1.5em 0;
display: flex;
justify-content: center;
gap: 0.3em;
flex-wrap: wrap;
}
.word-block {
display: flex;
flex-direction: column;
align-items: center;
min-width: 2em;
position: relative;
}
.pinyin {
font-size: 0.6em;
color: #666;
margin-bottom: 0.1em;
width: 6ch;
text-align: center;
font-family: Consolas, monospace;
white-space: pre;
}
.hanzi {
font-size: 1.8em;
font-weight: normal;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="line-container">
<div class="word-block"><div class="pinyin">xīng</div><div class="hanzi">兴</div></div>
<div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
<div class="word-block"><div class="pinyin">fèi</div><div class="hanzi">废</div></div>
<div class="word-block"><div class="pinyin">fù</div><div class="hanzi">附</div></div>
<div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
<div class="word-block"><div class="pinyin">pān</div><div class="hanzi">攀</div></div>
</div>
<div class="line-container">
<div class="word-block"><div class="pinyin">lù</div><div class="hanzi">露</div></div>
<div class="word-block"><div class="pinyin">cǎo</div><div class="hanzi">草</div></div>
<div class="word-block"><div class="pinyin">duì</div><div class="hanzi">对</div></div>
<div class="word-block"><div class="pinyin">shuāng</div><div class="hanzi">霜</div></div>
<div class="word-block"><div class="pinyin">jiān</div><div class="hanzi">菅</div></div>
</div>
</body>
</html>
页:
[1]