CourtBouillon

Grid Layout

After being a most-wanted feature for quite a time, always on top positions in our annual survey, with a lot of thumbs up on its GitHub issue, Grid layout is now supported in WeasyPrint v62!

Grid layout support has been added thanks to the financial support of a nice anonymous company. It’s been a real pleasure to work with them 😍.

What Can I Use?

All the Grid properties are supported by WeasyPrint and can be used to style your documents 🎉.

Indeed, you can also use margins, padding and borders on Grid containers and Grid items, and fragmentation between rows is handled.

Limitations

This implementation of Grid in WeasyPrint is a (big) first step for Grid support, and some values and use cases aren’t fully supported yet.

The full list of supported / unsupported Grid features is available in the documentation. Don’t hesitate to have a look!

CSS Nesting

Another nice feature has been added to WeasyPrint: CSS nesting!

When writing CSS, you often need to repeat selectors, and stylesheets can easily become not very pleasant to read. To avoid that, you could use a CSS generator, like SASS, to nest CSS selectors.

But with CSS nesting, you can now do that directly in pure CSS 🤯. Let’s say hi to nested rules and & selector.

For example, if you want to set a color on a section and then a different color for ul in this section, usually you write something like:

section {
  color: pink;
}

section ul {
  color: lightgreen;
}

With CSS nesting, you can now write:

section {
  color: pink;

  ul {
    color: lightgreen;
  }
}

The & selector allows to select the parent. For example, if you want your sections to be pink, except when they’re in an article, you can write:

section {
  color: pink;
}

article section {
  color: lightgreen;
}

With the & selector, you can now write:

section {
  color: pink;

  article & {
    color: lightgreen;
  }
}

CSS nesting will certainly simplify your stylesheets!

More Features and Bug Fixes

This version comes with other nice features:

• border-image-* support: you can now use images for box borders to have fancy borders. You can even use gradients!
• form field limit: you can set the maxlength HTML attribute on form inputs.

Font management has also been improved: fonts aren’t duplicated anymore in memory, saving a lot of RAM in some cases.

Several other bugs have been fixed, you can find the full list in the changelog.

What’s Next?

This version with Grid support is an important step for WeasyPrint, and we’re very 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 the nice anonymous company who sponsored Grid support, 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!

And 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.