ggrossetie / asciidoctor-web-pdf

Convert AsciiDoc documents to PDF using web technologies
https://asciidoctor.org
MIT License
443 stars 90 forks source link

Activating STEM causes margins to be ignored #665

Open jhannwong opened 1 year ago

jhannwong commented 1 year ago

The test.adoc:

= Test
:stylesdir: styles
:stylesheet: styles.css
:linkcss:
:stem: latexmath

== Chapter 1

We start with some math: stem:[c^2 = a^2 + b^2]

Lorem ipsum dolor sit amet, consectetur adipiscing elit... (x5 paragraphs to make multiple pages).

The styles/style.css:

@import url("./default.css");

@page {
    size: 148mm 210mm;
    margin-top: 5cm;
    margin-right: 20mm;
    margin-bottom: 25mm;
    margin-left: 15mm;

    @bottom-left {
        content: counter(page);
    }
}

Removing :stem: lets margins work again, but STEM is of course disabled.

ggrossetie commented 1 year ago

Here's what I get using the latest version (main branch):

image

jhannwong commented 1 year ago

I get the same problematic result when using main branch (downloaded as a zip from GitHub).

The Passing Test

Let's say we remove the :stem: latexmath attribute entry in test.adoc. If you do asciidoctor-web-pdf --preview test.adoc, and then use Dev Tools to examine the HTML Elements, you'll see inside <head> 3 <style data-pagedjs-inserted-styles="true"> elements. The 1st one seems to be the base style, containing defaults, such as --pagedjs-margin-top: 1in inside :root pseudo-class. The 2nd one might be from default.css(?), and has --pagedjs-margin-top: 1.25cm. The 3rd one is the one that contains the customized page margin:

.pagedjs_page {
    --pagedjs-margin-top: 5cm;
    --pagedjs-margin-right: 30mm;
    --pagedjs-margin-left: 25mm;
    --pagedjs-margin-bottom: 25mm;
    --pagedjs-pagebox-width: 148mm;
    --pagedjs-pagebox-height: 210mm
}

The Failing Test

Now, let's say we add the :stem: latexmath attribute entry in test.adoc. The first 3 <style data-pagedjs-inserted-styles="true"> elements are the same as for the previous test. But there are 4 more (total of 7). The 4 styles seem to be related to:

All those 4 extra styles contain the same override of page margins:

.pagedjs_page {
    --pagedjs-margin-top: 1.25cm;
    --pagedjs-margin-right: .75cm;
    --pagedjs-margin-left: .75cm;
    --pagedjs-margin-bottom: 1.25cm;
    --pagedjs-pagebox-width: 148mm;
    --pagedjs-pagebox-height: 210mm
}
ggrossetie commented 1 year ago

@jhannwong Can you please share a screenshot and/or the PDF file produced? I cannot reproduce this issue.

jhannwong commented 1 year ago

@jhannwong Can you please share a screenshot and/or the PDF file produced? I cannot reproduce this issue.

@Mogztter What do you see in the --preview mode? The failing test should show 7 styles, and the passing test only 4.

Are u able to try a minimal Docker container to test this? Lemme know if u need me to do that container.