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!

Uh oh!

Uh oh!

Add support for CSS Grid Layout Module #543

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions