Weasyprint: Support for @counter-style

Created on 3 Jan 2019  Â·  10Comments  Â·  Source: Kozea/WeasyPrint

On feature I'd like to see, is support for @counter-style. It appears to only be supported by FireFox, but I'd really like to be able to use it through WeasyPrint.

In my case specifically, I want to be able to have list and page counters that that aren't base ten, or anything else not on the predefined list of styles.

feature good first issue

Most helpful comment

Think I'll try. Might as well contribute to WeasyPrint given I intend to be using it quite a bit :P

Will just have to acclimate myself to how the repo is structured, and where everything is actually defined and stuff. I also haven't used Python enough recently haha. Main thing I guess would be finding where @ rules (@counter-style) are processed and adding a value function? (symbols())

Adventure time, I guess!

All 10 comments

Good idea! A basic implementation should be quite easy to add (basically add new CSS rules and put formatting_structure/counters.py's STYLES in the document). If anyone is interested, I'd be happy to help!

Think I'll try. Might as well contribute to WeasyPrint given I intend to be using it quite a bit :P

Will just have to acclimate myself to how the repo is structured, and where everything is actually defined and stuff. I also haven't used Python enough recently haha. Main thing I guess would be finding where @ rules (@counter-style) are processed and adding a value function? (symbols())

Adventure time, I guess!

@TUSF Good news, thank you! Here are some steps that could help you.

For now, you probably only want to handle the disc counter. The other ones will be quite easy to add later.

  1. You can parse the @counter-style rules in preprocess_stylesheet. There's no need to do the validation part (i.e. discard unknown descriptors), we can do that later. You can just parse a few descriptors for now, no need to implement the whole specification :wink:.

  2. The result of your parsing should be put in a dictionary (let's call it counter_style) whose keys are the counter types names, and whose values are functions that take one argument (value, the number, for example 3) and that return the corresponding counter string (for example 'iii' for lower roman). For now, you can only support one simple case, for example disc, using the counter_style['disc'] = lambda value: '•' code when you detect a disc counter style rule.

  3. This counter_style dictionary should be created (as an empty dictionary) in Document._render, then given as an argument to CSS that will give it to preprocess_stylesheet where it will be filled by the code in step 1.

  4. You can add one first predefined @counter-style rule into user agent stylesheet ('disc' for example, as you've already supported it in step 1). The user agent stylesheet is automatically applied to all documents.

  5. One last part: you have to use your new code instead of the old one. The goal is to make your counters formater dictionary be given as argument to add_box_marker, so that format_list_marker(counter_value, type_) can be replaced by counter_style[type_](counter_value). For now, the only place where it is interesting to have it is in element_to_box. You have to add the counter_style argument to element_to_box, and thus to build_formatting_structure (that calls element_to_box). As build_formatting_structure is only called by … Document._render (:smile: remember step 3?), it's easy to give it this argument.

That's all, an example with list-style-type: disc should now work :v:. It can be long to understand how everything works, but don't worry, you can ask anything, I'll try to answer as fast as I can. You'll break the tests but that's normal, we'll be there to fix them later!

And if it's too hard or too long, I can create a branch and make small commits so that these steps are easier to understand.

Has there been any updates to this issue? I'm interested in taking a look at this.

I had worked on it a few months back, but after losing much of the work I did on it, and my job picking up, I ended up never getting back to it. It was fairly simple, so if you want to get into it, go on ahead @tdextrous !

Has there been any updates to this issue? I'm interested in taking a look at this.

I'll be happy to help if you need anything!

I followed the steps above, and I was able to load custom disc counters from a counter_style dict defined in Document._render and populated in preprocess_stylesheet. There is still no parsing for custom @counter-style rules, just a hard coded value for disc.

I tried hard coding additional @counter-style rules in counter_style, but I couldn't get them to render. From what I could gather, it looks like the function that parses the list-style-type rule defaults to disc when a non-standard value is passed. However, I'm not too sure where that logic is at in the codebase.

What steps should I take from here? Should I try to edit the list-style-type parser? Or just finish hard coding the default list-style-type rules in the new counter_style logic? Thanks in advance!

I followed the steps above, and I was able to load custom disc counters from a counter_style dict defined in Document._render and populated in preprocess_stylesheet. There is still no parsing for custom @counter-style rules, just a hard coded value for disc.

:+1: Cool!

I tried hard coding additional @counter-style rules in counter_style, but I couldn't get them to render. From what I could gather, it looks like the function that parses the list-style-type rule defaults to disc when a non-standard value is passed. However, I'm not too sure where that logic is at in the codebase.

What steps should I take from here? Should I try to edit the list-style-type parser? Or just finish hard coding the default list-style-type rules in the new counter_style logic? Thanks in advance!

You can upload your code to your GitHub account so that I can guide you, it will be easier to spot the small errors.

Okay, just pushed my work so far. Thanks!

We can continue the discussion in #911.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Tontyna picture Tontyna  Â·  4Comments

mjbeyeler picture mjbeyeler  Â·  4Comments

whitelynx picture whitelynx  Â·  5Comments

bjornasm picture bjornasm  Â·  3Comments

ivanprice picture ivanprice  Â·  3Comments