Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

css override in multi html files #1628

Closed
easilylazy opened this issue Apr 26, 2022 · 3 comments
Closed

css override in multi html files #1628

easilylazy opened this issue Apr 26, 2022 · 3 comments
Labels
CSS Questions about how to do something with CSS

Comments

@easilylazy
Copy link

easilylazy commented Apr 26, 2022 •
edited

I need to merge multi html files and render to one pdf. So I write the html files in one file and use HTML() to load and html.write_pdf() to render.
But the css config in certain html file override other html files.

html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="calibre:cover" content="true"/>
        <title>Cover</title>
        <style type="text/css" title="override_css">
            @page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
        </style>
    </head>
    <body>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none">
                <image width="600" height="800" xlink:href="cover.jpeg"/>
            </svg>
        </div>
    </body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
  <head>
    <title>未知</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <!-- <link rel="stylesheet" type="text/css" href="./stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="C:\Users\cascara\Desktop\code\fork\epub2pdf\tmp\3\page_styles.css"/> -->
<link rel="stylesheet" type="text/css" href="./page_styles.css"/>
</head>
  <body class="calibre">
  <p class="calibre6"><br class="calibre7"/></p>

  <p class="calibre6"><br class="calibre7"/></p>

  <p class="calibre6">我醒来的时候，已经是夜里两点，口干舌燥。刘一朵睡着了，身体蜷成一团。我穿上衣服走到我叔的床边，在他的保温瓶里喝了点水，水尚温，我叔微张着嘴，一动不动，裹在白色的寝具里，我趴在他耳边叫他，叔？叔？他没有反应。我等到他又吸上一口气，披上军大衣，离开了医院。</p>

  <p class="calibre6">出租车司机开得飞快，冬天的深夜，路上几乎没有人，路边时有呕吐物，已经冻成硬坨儿。树木都秃了，像是铁做的。他认识小型拖拉机厂，说没人不认识，那曾经是效益最好的大工厂，现在没拆，一直烂在那里，地皮的权属不清。我站在大门口，发现厂子比我想象得还要大，如同巨兽一般盘踞于此，大门有五六米高，只是没有牌子，也没有灯。我从大门上面爬过去，跨过锋利的铁尖，刚一落地，门房的灯亮了。一个人拉开窗户探出头来，此人也许五十岁，也许六十，头发没白，可是脸上都是皱纹，下巴上全是胡子楂子，瞪着一双突出的大眼，看着我。手里拿着一只甩棍。他说，爬回去。我看着他的眼珠，一半在里头，一半在外头，好像随时能掉在地上。我说，甘沛元？他说，你谁啊？我说，干瞪？他说，哥们，你认识我？进来坐坐。他的屋子很小，从窗户里望，有一个煤炉子和一个小电视，煤炉上搁着水壶，墙上都结了冰。我呼出一口气说，我是刘庆革的司机。他说，你是庆革厂长的司机？他现在怎么样，每个月往我卡里打钱，好久没见过他了。我说，他挺好，老提起你，就是忙。我进去走一圈，一会回来我们聊聊。信得过吗？他说，大半夜的，就是走一圈？我说，就是走一圈，然后回来跟你喝点酒。他说，成，我把酒温上等你。</p>

  <p class="calibre6">厂区的中央是一条宽阔的大道，两边是厂房，厂房都是铁门，有的锁了，有的锁已经坏了，风一吹嘎吱吱直响。有的已经空空如也，玻璃全都碎掉，有的还有生锈的生产线，工具箱倒在地上，我扶起来一个，发现里面有1996年的报纸。我顺着大路往里走，车间的墙上刷着字，大都斑驳，但是能认出大概，一车间是装配车间，二车间是维修车间，三车间是喷漆车间，一直到九车间，是检测车间。路的左侧，跟车间正对，有卫生所和工人之家，卫生所的地上还有滴流瓶子，上面写着青霉素，工人之家有个舞台，座椅烂了大半，东倒西歪。我走到路的尽头，右面挂着一个牌子，上面写着：子弟幼儿园。走进去，看见一栋二层小楼，楼门紧锁。楼前的土地上，有一个跷跷板。我在跷跷板上坐了一会，虽然锈了，可是还能翘动，只是对面没有人，只能当椅子。坐了大概五分钟，我回到二车间，找到一根弯曲的铁条，回到跷跷板开始挖。土已经冻了，非常难对付，累得我满头大汗，大概挖了一个钟头，已经有了一个半米的小坑，什么也没有。我歇了一会，抽了支烟，发现汗要凉，赶紧继续挖。又挖了半米，看见一串骨头，应该是脚趾，我顺着脚趾往宽了挖，很小心，怕把骨头碰坏了。又花了大概四十分钟，看见了一副骸骨，平躺在坑里，不知此人生前多高，但是骨头是不大，也许人的骸骨都比真人要小。他的骨头里面杂着几块破布，是工作服。我盯着骨架看了一会，想了想城市周围的墓地，也许东头的那个棋盘山墓园不错，我给我爷扫墓去过，如果能订到南山的位置，居高临下，能够俯瞰半个城。</p>

  <p class="calibre6">墓碑上该刻什么，一时想不出，名字也许没有，话总该写上几句。我裹着军大衣蹲在坑边想着，冷风吹动我嘴前的火光，也许我应该去门房的小屋里喝点酒暖暖，人生有时候就是这样，痛快地喝点酒，让筋骨舒缓，然后一切就都清晰起来了。</p>
</body>
</html>

problem

the margin of other html files is override by css in the first html file

image
@easilylazy
Copy link
Author

easilylazy commented Apr 27, 2022 •
edited

After further experiments, I found that css style in the last html will override previous css style. So is there way to let the html file stick to each css style when merge to one html file?

@liZe liZe added bug Existing features not working as expected CSS Questions about how to do something with CSS and removed bug Existing features not working as expected labels Apr 27, 2022
@liZe
Copy link
Member

liZe commented Apr 27, 2022

Hello!

CSS rules overriding previous rules is a normal behavior of CSS, that’s why it works that way.

One solution is to inline the CSS in the HTML before merging the HTML files. You can try a project like css-inline, looks like it does what you want.

@easilylazy
Copy link
Author

Thanks for your reply!

Your solution is working for me, and it's just what I need. Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Questions about how to do something with CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @easilylazy