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.

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

Avoid applying quarto-figure CSS inside html widgets outputs #7849

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

cderv
Copy link
Collaborator

@cderv cderv commented Dec 8, 2023

This PR add some :not() selectors on the quarto-figure div CSS rule so that it does not apply on div inside html widgets elements.

I did use this

div:not(.html-widget, :nth-child(1):not(.html-widget))

with :nth_child(1) because it seems we do add some specific div like this

<div aria-describedby="fig-leaflet-caption-0ceaefa1-69ba-4598-a22c-09a6ac19f8ca">

and in fact the CSS rules we have apply on it directly. So I did not test this one, but the child of it. For security I also added the div.html-widget part though.

@cscheid I see from comment that theses rules are for mermaid and dot

.quarto-figure-left > figure > div /* for mermaid and dot diagrams */ {

another fix would be to make them more selective toward their mermaid or dot target if they are only for those cases.
Maybe you remember the precise context ?

Hard to add test on this, so I did not but I manually tested and this works.

@cderv cderv linked an issue Dec 8, 2023 that may be closed by this pull request
@cderv cderv requested a review from cscheid December 8, 2023 17:29
@cscheid
Copy link
Collaborator

cscheid commented Dec 8, 2023

Hm. I'm not sure I like this. It's pretty ugly, we don't always have captions, and nth-child is pretty brittle in general...

@cderv
Copy link
Collaborator Author

cderv commented Dec 8, 2023

It's pretty ugly, we don't always have captions

When does the rule will apply and there is no caption ? If I have an example I can see what the HTML wrapping structure would be.

I though using div:not(.html-widget) covered this because you would not add the div with aria label.

nth-child is pretty brittle in general...

We could try to make it more generic, but as we do the wrapping ourself (adding this specific div with aria label), I thought this was fine to do that. Because we do want to not target when this div wraps a html widget. That is the leaflet exact issue.

The main issue here is that we have a pretty generic rule

.quarto-figure-left > figure > div

This will apply to a lot of content - especially considering you can create figure with anything now. isn't it ?

Can we make this rule more targeted ? What does .quarto-figure-center > figure > div aims to center exactly ? The whole div content ?

@cderv
Copy link
Collaborator Author

cderv commented Feb 19, 2024

@cscheid I just rebase this PR but from discussion at #7843 it seems we don't want this fix that way. So I'll mark this PR as draft and we can come back when we're ready to make CSS change.

based on what you said at #7843 (comment)

I'm going to push this to 1.5, and at that point we can carefully consider the change from text-align to margin-left, etc.

@cderv cderv marked this pull request as draft February 19, 2024 16:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

R Leaflet legends are centered when labelled as fig-s
2 participants