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

Cannot add css classes to implicit_figures #3094

Open
nomeata opened this issue Aug 29, 2016 · 7 comments
Open

Cannot add css classes to implicit_figures #3094

nomeata opened this issue Aug 29, 2016 · 7 comments

Comments

@nomeata
Copy link
Contributor

nomeata commented Aug 29, 2016

When creating an implicit_figure, e.g.

![Function composition](/images/function-machine.png){ width=200 .floatright .noprint }

then the style information is attached to the <img> tag, not the <div class="figure"> tag:

<div class="figure">
<img src="../images/function-machine.png" alt="Function composition" class="floatright noprint" width="200">
<p class="caption">Function composition</p>
</div>

This prevents different styling of figures via CSS, e.g.

@media print {
    .noprint {
        display: none;
    }
}

(This would leave the caption in the document.)

I don’t have a good idea about a backwards-compatible syntax that would allow the user to assign style data to the outermost <div>, though.

@crmackay
Copy link

could you use the + css selector, which selects elements found just after other elements to display:none the caption?:

@media print{
    .noprint, .noprint+.caption {
        display:none;
    }
}

@nomeata
Copy link
Contributor Author

nomeata commented Aug 30, 2016

This would not hide the div .figure, though, would it?

@crmackay
Copy link

No, but if everything in the div is display:none then it might note show up. Depends on your layout etc.

@van-de-bugger
Copy link

Faced the same issue with implicit figures in html5:

$ cat test.md 
![caption](picture.jpg "title"){#id .class}

$ pandoc -t html5 ./test.md
<figure>
<img src="picture.jpg" title="title" id="id" class="class"
alt="caption" />
<figcaption aria-hidden="true">caption</figcaption>
</figure>

Everything is correct, but id and class attributes will be much more useful if they are attributes of figure element, e. g.:

$ pandoc -t html5 ./test.md
<figure id="id" class="class">
<img src="picture.jpg" title="title" alt="caption" />
<figcaption aria-hidden="true">caption</figcaption>
</figure>

In such a case, custom style sheet will be trivial and allow to freely stylize everything: figure, img, and figcaption. Having id and class attributes at img element makes figure stylizing non-trivial.

@jgm
Copy link
Owner

jgm commented Jul 15, 2023

With pandoc 3.1.5, the id attribute, at least, does get put on figure (but not class).

@van-de-bugger
Copy link

With pandoc 3.1.5, the id attribute, at least, does get put on figure (but not class).

Thanks for the info, it's good to know. I still use pandoc 2.19.2 in Fedora 38, though.

What about class? Is it not yet implemented, or do you have any principal objections from moving it to figure?

BTW: If id and class attributes are put on img, styling figure element is trivial with :has CSS selector. Unfortunately, this is Selectors Level 4 Draft. Only very recent browsers support it.

@jgm
Copy link
Owner

jgm commented Jul 16, 2023

I'm very tempted to move class, yes. But there's the usual fear of unexpected consequences and breaking things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants