CourtBouillon

CSS Color Level 4

CSS Color Level 4 is now supported in WeasyPrint, with tinycss2 v1.4.0.

So, what changes with Color Level 4?

A New Syntax for Existing Functions

Now you can use the new syntax for rgb(), rgba(), hsl() and hsla(), which means that arguments are space-separated.

For example, rgb(232, 64, 58) can be writen rgb(232 64 58).

Also, rgb() is now an alias for rgba(). You can specified the opacity directly within rgb() like this rgb(232 64 58 / 0.5). It works the same way for hsl() being an alias of hsla().

A New Way of Defining Colors

New functions to define (more) colors in different color spaces are available 🌈! Let’s welcome:

• lab() to define colors in the CIE Lab color space,
• lch() to define colors in the CIELCH color space,
• oklab() to define colors in the Oklab color space, which is an improved Lab-like space,
• and oklch() to define colors in the Oklch color space, which (you may have guessed) is an improved CIELCH-like space.

A new way of defining sRGB colors is also available: the hwb() function which let you defined the color through its hue, whiteness and blackness.

If you’re interested in learning more about color spaces in WeasyPrint, you should read our previous article 🗞️.

Page Groups

Until then, you had the possibility to select the nth page of a document using @page :nth(5).

Now, thanks to the financial support of Code & Co., you can select the nth page of a group of named pages 🤩.

For example:

<style>
  @page {
    margin: 20mm;
  }
  @page :nth(3 of chapter) {
    margin: 40mm;
  }
  article {
    page: chapter;
  }
</style>

<div>
  Regular page.
</div>
<article>
  <p>
    A chapter page.
  </p>
  <p>
    With a lot of text, let’s say we have at least 3 pages because of this article.
  </p>
</article>

All the pages have 20mm of margins, but the third page of the chapter group has larger margins.

PDF Forms Improvements

For PDF Forms, WeasyPrint was already supporting checkboxes, select fields, text fields and textarea. Now you also can put radio inputs in your forms ✨!

PDF Forms got another nice feature. You can now use a submit input to send the PDF Forms data 🤯.

Submitting data only works with Adobe Reader and Foxit. Other open-source PDF readers indicate in their code that the feature isn’t supported.

Flex Improvements

Bad news, flex support hasn’t been entirely rewrite yet. But good news, flex support received some care in this new version 💖.

Several improvements have been made:

• respect break-inside: avoid in flex items,
• support absolute children in flex boxes,
• respect margin: auto for flex boxes,
• fix height of flex elements when using flex-direction: column, and
• a better rendering of nested flex elements.

Dependencies Update

Other than requiring tinycss2 v1.4.0 to handle CSS Color Level 4, WeasyPrint now relies on tinyhtml5 to parse HTML and transform it into an ElementTree tree.

Until now, we were relying on html5lib to do this job. Unfortunately, there are no regular versions of this library, the last one being released in 2020. After discussing with its maintainers, we decided to fork it and focus on the features we need in WeasyPrint.

Other Things

Among all the new things in this release, WeasyPrint now supports the mask-border-* properties, which allow you to have more fancy borders.

A lot of bugs have also been fixed. Some are about tables 🪲:

• support break-inside: avoid in table cells,
• fix vertical alignment of floating elements in tables,
• don’t draw bottom border on cells with split rows.

Other noticable issues have been fixed, like 🐞:

• improved compliance with PDF/A-1* format,
• managing a bug from Adobe Photoshop which is inverting data of some JPEG (hopefully they will fix that on their side one day).

Some work has also been done for some performance issues.

Now, WeasyPrint uses Harfbuzz by default to create subset of fonts, which is way faster, specially for large fonts. Fonttools is still used as a fallback.

The algorithm to resolve colspan has also been improved and is now faster, especially when you have a huge colspan value.

These are the major bug fixes in this release, you can find the complete list in the changelog.

What’s Next?

This version with CSS Color Level 4 support is an important step forward the support of CMYK and, as always, we’re happy to release it 😍.

We hope you’ll have fun with this new version and that all these new features will be useful for you.

What’s next? That depends on you! If you are interested in better CSS layout support such as solid Flexbox or complete Grid support, don’t be afraid to contact us! Your help might be very useful.

Thanks a lot to Code & Co. who sponsored the page group features, and thanks a lot to all the contributors of this release 💜.

Opening issues and pull requests is also a great way to improve WeasyPrint. If you want to get involved, a list of good first issues is waiting for you! Choose your favorite issue and write a short comment, we’ll be happy to help you dive into WeasyPrint’s code!

Of course you can also become a sponsor on OpenCollective, it really helps us to have more time to work on WeasyPrint and its dependencies.

If you missed it, October 12th was our 4-year anniversary. As each year we published a rewind of the year about the projects, money and future. This year, we also launched consulting packages, don’t hesitate to contact us if you’re interested.