Add support for CSS Grid Layout Module

[ghost]

Could this be added to supported CSS specs? It makes layout design sooo much easier.

https://www.w3.org/TR/css-grid-1/

[liZe]

@LucienD You're lucky, the algorithm has already been done for you 😉.

[MindFluid]

Hi @liZe, where in the project would I start to begin figuring out how I may contribute this?
I haven't worked on complex python projects such as this, but I'd be keen to try my hand.

[liZe]

Hello @MindFluid!

where in the project would I start to begin figuring out how I may contribute this?
I haven't worked on complex python projects such as this, but I'd be keen to try my hand.

Good news, thank you!

First of all: this issue needs a lot of work and requires a lot of patience. The first steps are not that hard and are a good way to understand WeasyPrint, but implementing grid's algorithm is really complex. So: if you don't feel like you can spend days before getting a simple grid on a PDF, you can try other issues with the "Good first issue" label. I can help you a lot on these issues, just ask.

If you're not afraid and want to work on this issue, no problem! As I said, the first steps are a good way to discover WeasyPrint. Even if you will not get a grid quickly, there's a lot of fun problems to solve and of small rewards to get.

Here are the steps you can follow:

Define your test case

The first way to test during development (the one I prefer) is to create a small HTML file with only CSS and to launch weasyprint from the command line. Logs will tell you that your properties are unknown.

For example, a good first file for you could be:

<style>
  article {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 50px;
  }
  div {
    grid-column-start: 1;
    grid-row-start: 1;
  }
</style>

For the moment, you get:

$ python -m weasyprint /tmp/grid.html /tmp/grid.pdf
WARNING: Ignored `grid-template-columns: auto 1fr` at 3:5, unknown property.
WARNING: Ignored `grid-template-rows: auto 50px` at 4:5, unknown property.
WARNING: Ignored `grid-column-start: 1` at 7:5, unknown property.
WARNING: Ignored `grid-row-start: 1` at 8:5, unknown property.

Your first mission is to make these messages disappear. You can only focus on these 4 properties for now. How to do that? Go to the next step!

Validate the properties

CSS properties related to grid are currently unknown for WeasyPrint. You must add a validator to check that the values are correct. Validators are in css/validation/properties.py, you can add your functions here.

The syntax of the values allowed for the properties are defined in the "Value" line of each property in the specification (for example, it is <grid-line> for grid-row-start). If the syntax looks too complicated, don't panic! It's normal at the beginning, but it's not that difficult. You can just allow a subset (for example, just allow numbers in grid-column-start) and then handle more and more cases.

The @property decorator is needed to declare the property, its name is automatically designed by the function name (hyphens are transformed into underscores). Other decorators (single_keyword, single_token) may be needed depending on the type of values the property is waiting for. Looking at the other validators should give you a good idea about how they work.

A validator must return the pythonic representation of the values. For example, if your property needs a string, you return a str, if the property needs a list, you return a tuple, etc. If the value is invalid, the validator must return None (returning nothing in a function automatically returns None in Python). Validators decorated by the single_keyword decorator only need to return True (validation OK) or False.

---

If you reach this point, congratulations! This comment is already too long, you'll discover the next steps in the next comment!

If you need help or have any questions, just ask, I'll do my best to help!

[MindFluid]

Thanks for the detailed answer @liZe, I'll try find some time this year to get around this!

[KevBelisle]

Is any work being done on this?

[liZe]

Is any work being done on this?

Nobody's working on that as far as I know.

[urbantumbleweed]

I just ran into this. Definitely would be awesome if this could be used.

[liZe]

I need this. Send help.

Hello @rarenatoe.

I’d love to have this feature too. Everybody does. But unfortunately I don’t have the time to implement it: the amount of work needed to support this is important, and there are lots of other bugs to fix and features to add.

You can help us by writing some code (if you have Python skills), we can help you if you want. If you’re not a Python dev, you can also support us on OpenCollective, it really gives us more time to work on WeasyPrint, and hopefully to solve this issue more quickly.

[keinagae]

hi can you guide me on it so that i can implement it?

[o314]

Hello. What about organizing a google summer of code to handle those kind of issue ?
BTW, the recruiting date goes from mi-january to mi-feb, nearly now ...

---

EDIT

PS here is the 2020 org list https://summerofcode.withgoogle.com/archive/2020/organizations/

ffmeg, opencv inkscape, processing foundation, purr data, videolan
Profiles are not that different of Kozea.
A lot of graphics orgs, note enough web ones. Bring back the balance !

[liZe]

hi can you guide me on it so that i can implement it?

Hello @keinagae!

The best way for you to start working on Grid support is to follow this comment. If you reach the end of the comment, I’ll write the next one 😉.

Hello. What about organizing a google summer of code to handle those kind of issue ?

Hello @o314.

Getting money from Google to develop a web engine that can help users to get rid of Google products is a bit awkward for us 😉.

[o314]

Hi. As google is the uncontested master of the universe with chrome / chromium, i don't believe there is such an appetency when we go down to the pdf side of the rendering eg. pdium. So, fortunately, weasyprint might not be snipped soon, hurrah and happy new year.

One can always "borrow" them some code since the license of the chromium blink engine is bsd and the code source is here :

• https://www.chromestatus.com/feature/4589636412243968
• https://github.com/chromium/chromium/tree/master/third_party/blink/renderer/core/layout
• https://github.com/chromium/chromium/blob/master/third_party/blink/renderer/core/layout/grid.h

The mozilla ones is less business friendly

• https://github.com/mozilla/gecko-dev/search?q=GridTemplateComponent
• https://github.com/mozilla/gecko-dev/blob/master/servo/components/style/properties/shorthands/position.mako.rs
• https://github.com/mozilla/gecko-dev/blob/master/servo/components/style/values/specified/grid.rs
• https://github.com/mozilla/gecko-dev/blob/master/servo/components/style/values/computed/position.rs

But docs are good :)

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

IMO, expect some hundred hours of work, it may be a bit hard for a newcomer, but taught by the best

[dennisvang]

Hello @liZe,

CSS grid support would be very nice to have, so I decided to try my hand at this, based on your comment above.

I only just started playing around with it, but maybe you could have a look, to see if I'm at least moving in the right direction?

Here's what I have up to now.

It's a work in progress...

EDIT:

After re-reading the original comment, just now, I see it already answers some of my questions.

[liZe]

Hi @dennisvang,

That’s a good start! When your validations are done, just ask me, I’ll add a comment with the next steps!

[grewn0uille]

Hello!

(The survey is now closed. Thanks for all your answers! We’ll share the results soon 😉)

If you’re interested in grid, we created a short survey where you can give a boost to this feature and help us to improve WeasyPrint 😉

Vote for it!

[khaled-muhammad]

Hi @dennisvang,

That’s a good start! When your validations are done, just ask me, I’ll add a comment with the next steps!

@liZe I want the next steps.

[jrodria]

i dont want to receive this mails any more El vie, 18 jun 2021 a las 11:50, Khalid Muhammad ***@***.***>) escribió:

…

Hi @dennisvang <https://github.com/dennisvang>, That’s a good start! When your validations are done, just ask me, I’ll add a comment with the next steps! @liZe <https://github.com/liZe> I want the next steps. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#543 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJ32JM2QCPZQD5QA72VZ4B3TTNTLJANCNFSM4EEWX6NQ> .

-- [image: Avatar] JAVIER RODRIGUEZ AGUILERA MACHINE LEARNING ANALYST GERENCIA INTELIGENCIA ARTIFICIAL *email:* ***@***.*** ALCANTARA 99, Piso 6,SANTIAGO Teléfono: 02 26927000 Ext: 9633 Te invitamos a ingresar a nuestros *Canales Digitales, Bci.cl y App Bci*, en donde podrás realizar consultas y hacer tus operaciones bancarias las *24 horas del día*, todos los días del año. *Bci.cl*, realiza todas tus operaciones bancarias y de inversión, en cualquier momento. *App Bci*, descárgala desde App Store o Google Play y accede a tu información de manera rápida, fácil y segura. *Chat Digital*, busca el ícono en tu sitio privado y contacta a un ejecutivo virtual que te ayudará en línea. *Clientes empresas*, ingresa a nuestra plataforma digital 360 | connect, en www.bci/empresas o con la Mesa de ayuda al 2 2697 5000.

-- * Nunca y bajo ninguna circunstancia, te solicitaremos de manera escrita o verbal, tus claves personales, tampoco en links enviados por sitios con apariencia legítima, vía SMS, correos electrónicos o emails.. * Protege y nunca compartas tus claves de acceso, BciPass, Multipass. * Accede directo ingresando la dirección electrónica de Bci en la barra de tu navegador. * No accedas a la página del banco a través de links entregados por buscadores (Google, otros) o a través de enlaces que aparezcan en otras web, porque pueden llevarte a sitios falsos y tener links maliciosos. * Nunca bloquearemos tu cuenta como argumento para solicitar actualización de datos CONFIDENCIALIDAD: Toda la información contenida en este mensaje es confidencial y destinada al uso exclusivo del emisor y/o del destinatario. Cualquier tratamiento no autorizado de esta información podrá ser sancionado conforme a la Ley. Si recibió este mensaje por error, por favor infórmenos, borre el mensaje y sus archivos adjuntos

[grewn0uille]

Hi @jrodria!
You can click on "unsubscribe" on the right panel of the issue to stop receiving notifications about this issue. And also there is a link in the mails.

[rarenatoe]

@jrodria No te vayas :(

[grewn0uille]

Hello!

As it’s soon our 2-year anniversary as CourtBouillon, we opened a short survey to know more about your expectations.
Don’t hesitate to support this feature and give it a boost 🚀!

The survey will be opened until October 10th.

Update: the survey is now closed. You can find the results here.

[grewn0uille]

Hello!

As you may know, two weeks ago was CourtBouillon 3-year anniversary 🎉.

For this occasion, we prepared a short survey to have your opinion on this year’s features and to know what you’d like to see in the future!
Don’t hesitate to give a boost to this feature ✨️

The survey is opened until November 19.

[SrGitQ]

Hi!, I'm interested in supporting this issue, is there a get involved guide for code, test, and building?

[liZe]

Hi!, I'm interested in supporting this issue, is there a get involved guide for code, test, and building?

Hi!

You can read the contribute page of the documentation.

To be honest, this feature is quite hard to implement. Maybe you can dive into WeasyPrint’s code by trying to solve a good first issue?

[xalteropsx]

is grid still not working?

[grewn0uille]

is grid still not working?

The issue is still opened, linked to milestone 62.0 and the last version of WeasyPrint is 61.2. So it’s planned for the next main version.

[liZe]

A pull request has been opened: #2121. If you’re interested in Grid, it’s time to test and give us some feedback!

[liZe]

We’ll merge #2121 in a couple of days, last chance to test!

[andreasnuesslein]

exciting. i didnt get a chance to test it, but that might change soon. if i find something, i'll create a fresh bug report. cheers and thank you for weasyprint :)