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

The HTML fieldset element does not render correctly #1892

Closed
michielderoos opened this issue Jun 2, 2023 · 3 comments
Closed

The HTML fieldset element does not render correctly #1892

michielderoos opened this issue Jun 2, 2023 · 3 comments
Labels
CSS Questions about how to do something with CSS good first issue Issues that can be quite easily solved by Python developers with a good CSS background

Comments

@michielderoos
Copy link

michielderoos commented Jun 2, 2023 •
edited
Loading

With this HTML

<!doctype html>
<html>
<body>
    <fieldset>
        <legend>Sample Text</legend>
        <p>Text Text Text</p>
    </fieldset>
</body>
</html>

This is expected (from Chrome 113):
image
However, this is the result (using Weasyprint 59):

image
@liZe liZe added the CSS Questions about how to do something with CSS label Jun 2, 2023
@liZe
Copy link
Member

liZe commented Jun 2, 2023

Hi!

As far as I can tell, there’s no hard rule about how fieldset legends have to be rendered in the specification. But we can try to provide a default rendering that’s close to other browsers.

The solution to do this is to find a default CSS that would work, and put it into the user-agent stylesheet. Anyone intersted?

@liZe liZe added the good first issue Issues that can be quite easily solved by Python developers with a good CSS background label Jun 2, 2023
@oshmoun
Copy link
Contributor

oshmoun commented Jul 29, 2023

added this to the stylesheet:

fieldset legend {display: inline-block; position: relative; top: -1.1em; background: white}

getting this result:
image

Upon checking how chromium does it, it seems that display: block is utilized, not block-inline, but weasyprint seems to always give block elements the full width, so could not use that here.
Also not sure about hardcoding the background color, since chromium also doesn't do that, but without it the result would like this in weasyprint:
image

@liZe
Copy link
Member

liZe commented Aug 20, 2023

Well, it seems complex to get a standard stylesheet that will work for everybody. The current rendering is not perfect but it’s OK, and nothing is done wrong according to the specifications. Browsers seem to use specific rendering for these elements, just as they do for form fields for example. Let’s keep the current rendering and let users write their own CSS, it’s actually better than setting default rules that will have to be overridden by users.

@liZe liZe closed this as completed Aug 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Questions about how to do something with CSS 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
3 participants
@liZe @oshmoun @michielderoos