Weasyprint: Increased space between text lines

Created on 23 Oct 2018 · 11Comments · Source: Kozea/WeasyPrint

I discovered an estrange behavior after change all size measurement to "rem" units. All is working as it should on screen and when I print from Firefox/Chromium, the space between each line is correct. However, WeasyPrint increase at least twice the space between lines. It seems to be the line-height of lines inside <details> HTML5 marker, but I'm not sure.

Update: I have had a problem editing, but with Firefox, that doesn't let me attach files or even "edit" the post after published. Now, with Chromium, attach the captured image and the example html/css files
weasyprint issue.zip

weasyprint - interline space duplicated

bug

Source

RafaelLinux

All 11 comments

It's neither rem nor line-height -- it's WeasyPrint having issues with <details>.

omg-details

Corresponding HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>issue with details</title>  

<style type="text/css">
p {
  border: 1px solid black; padding:0
}

details, div.details {
  border: 1px solid blue; 
  padding: .5em;
  margin: 1em;
  background-color: #eee;
}
</style>
</head>
<body>
<details open="true">
  Strange things happen in &lt;details&gt; 
  <p>just a (default) paragraph</p>
  <p>just a (default) paragraph</p>
  ... really weird things
</details>

<details style="display:block" open="true">
  ... unless you declare <code>details{display:block}</code>
  <p>just a (default) paragraph</p>
  <p>just a (default) paragraph</p>
</details>

</body>
</html>

Tontyna on 24 Oct 2018

@liZe quick fix via the default stylesheets? Shall I / willl you?

I know it's more complicate (wish they'd never invented HTML 5)

Tontyna on 24 Oct 2018

I'm sorry, I forgot to ask about other thing that in this case I can not get to work. Maybe I'm coding something wrong in CSS, but I don't see any wrong in my coding, so as a last chance I ask you. I have a first page and last page declared. Both have no text in headers, footers on any text in no margin. Declaration in CSS (attached before) is exactly the same for first and last page, but despite first page is not showing nothing around margin, the last page is showing the root page declared CSS. I even try to declare using @page:first, @page:last { ............} but this didn't work neither.

Please, what am I doing something incorrectly?

Thank you

RafaelLinux on 24 Oct 2018

I, too, wish users would read WeasyPrint's output on stdout:

....
Step 2 - Fetching and parsing CSS - [..]/maquetacion.css
....
Error: Expected ':' after declaration name, got {} block. at 417:3.
Unsupported @page selector ":last
    ", the whole @page rule was ignored at 465:2.

Tontyna on 24 Oct 2018

😄1

Declaration in CSS (attached before) is exactly the same for first and last page, but despite first page is not showing nothing around margin, the last page is showing the root page declared CSS. I even try to declare using @page:first, @page:last { ............} but this didn't work neither.

@page:last doesn't exist, that's why you get this error.

@liZe quick fix via the default stylesheets? Shall I / willl you?

I'll check this.

liZe on 24 Oct 2018

👍1

I'm sorry, my fault. I launch Weasyprint from PHP page, so at this stage, in rare cases I open console to see logs. My imagination made me guess an (interesting) page pseudoclass.
I'll take it into account next time before asking :(

Thank you!!

RafaelLinux on 24 Oct 2018

@liZe quick fix via the default stylesheets? Shall I / willl you?

I know it's more complicate (wish they'd never invented HTML 5)

After losing myself for a while in HTML5 specs, I've just added a rule for details. I should try to find a quite recent CSS user agent stylesheet to upgrade WeasyPrint's one.

liZe on 29 Oct 2018

So, should I update to get correct result??

RafaelLinux on 29 Oct 2018

You can either install the WeasyPrint master branch or add the following definition to your stylesheet's @media print section:

details { display: block; unicode-bidi: isolate; }

Tontyna on 29 Oct 2018

👍1

I don't understand how is working "unicode-bidi" in this case, but the fact is that IS WORKING!!!
Thank you

RafaelLinux on 30 Oct 2018

unicode-bidi: isolate;

The relevant part is just display: block. unicode-bidi is just a property that often has to be set in block-mode boxes to handle bidirectional text (that's not really supported by WeasyPrint by the way).

liZe on 30 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings