Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support of @media only #2140

Open
vpoulailleau opened this issue Apr 30, 2024 · 4 comments
Open

Support of @media only #2140

vpoulailleau opened this issue Apr 30, 2024 · 4 comments
Labels
feature New feature that should be supported good first issue Issues that can be quite easily solved by Python developers with a good CSS background

Comments

@vpoulailleau
Copy link

With weasyprint 62, I get WARNING: Invalid media type ' only print ' the whole @media rule was ignored at 3:5. for the following HTML:

<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <style>
    h1 {color: red;}
    @media only print {
      h1 {
        color: green;
      }
    }
    </style>
  </head>
  <body>
    <main>
      <h1>Contenu Principal</h1>
      <p>Ceci est un paragraphe de texte.</p>
    </main>
  </body>
</html>

According to https://www.w3.org/TR/mediaqueries-5/#typedef-media-query-list this is valid CSS. only seems not supported yet (I haven't tested not, or, and for @media not screen for instance).

I can easily workaround this limitation by removing only.
@liZe
Copy link
Member

liZe commented Apr 30, 2024

Hi!

Thanks for the report. Media queries are not very well supported, this is an old problem, see #494.

The main problem we have with media queries is that it’s hard to define the viewport dimension on paged media. But supporting "only" (and probably "not", "or" and "and", as long as we have only media types) is actually much easier.

Interested in adding this feature? That’s a good first issue if you have some Python skills and no idea about how WeasyPrint works!

The magic happens here:

WeasyPrint/weasyprint/css/media_queries.py

Lines 25 to 39 in d5d7ce3

def parse_media_query(tokens):
tokens = remove_whitespace(tokens)
if not tokens:
return ['all']
else:
media = []
for part in split_on_comma(tokens):
types = [token.type for token in part]
if types == ['ident']:
media.append(part[0].lower_value)
else:
LOGGER.warning(
'Expected a media type, got %r', tinycss2.serialize(part))
return
return media

@liZe liZe added feature New feature that should be supported good first issue Issues that can be quite easily solved by Python developers with a good CSS background labels Apr 30, 2024
@vpoulailleau
Copy link
Author

@liZe I currently don't have the time right now. But I would be glad to help.

BTW, will there be a coding sprint for weasyprint at PyCon FR 2024? I planned to come and help Julien for the Python docs translation, but I would be happy to better understand weasyprint that I use quite often. We saw each other during last AFPy's assemblée générale !

@liZe
Copy link
Member

liZe commented May 2, 2024

I currently don't have the time right now. But I would be glad to help.

No problem, let’s save this chance to another newcomer!

BTW, will there be a coding sprint for weasyprint at PyCon FR 2024? I planned to come and help Julien for the Python docs translation, but I would be happy to better understand weasyprint that I use quite often. We saw each other during last AFPy's assemblée générale !

😄

I don’t think that we’ll have the time to organize a coding sprint because we’re quite busy with the organization (and Julien will be happy to have you). But we’ll probably find the time to talk about WeasyPrint’s internals!

@vpoulailleau
Copy link
Author

I imagine it takes time to organize everything.

Yes, see you in Strasbourg!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature that should be supported good first issue Issues that can be quite easily solved by Python developers with a good CSS background
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @vpoulailleau