Add display block CSS to figure anchor span #1156
Conversation
| labs[[i]] = label_prefix(type, sep = ': ')(num) | ||
| k = max(figs[figs <= i]) | ||
| content[k] = paste(c(content[k], sprintf('<span id="%s"></span>', lab)), collapse = '') | ||
| content[k] = paste(c(content[k], sprintf('<span style="display:block;" id="%s"></span>', lab)), collapse = '') |
There was a problem hiding this comment.
I'm wondering if it's okay to use div instead:
| content[k] = paste(c(content[k], sprintf('<span style="display:block;" id="%s"></span>', lab)), collapse = '') | |
| content[k] = paste(c(content[k], sprintf('<div id="%s"></div>', lab)), collapse = '') |
There was a problem hiding this comment.
I have seen some example using a span for other issues(e.g https://stackoverflow.com/a/29123823/3436535)
I don't know if using a div can break something as it is stronger than span for HTML structure, isn't it ?
Also, changing it would break some custom CSS if any user has used a rule based on the span, but it seems unlikely (I don't see why it would be useful)
Question: idealy, adding the id on the img tag would be the best, wouldn't it ? or on the div of class figure ?
Anyway, I think a div could work yes. I did not thought of that.
maybe with visibility = "hidden" ? or anything that could help for Accessibility - I wonder how this empty tag renders.
There was a problem hiding this comment.
I think the difference between an empty span and an empty div is that the former's size is 0 x 0 by default and the latter's size is 100% x 0. An empty span with display: block should be equivalent to an empty div.
Also, changing it would break some custom CSS if any user has used a rule based on the span, but it seems unlikely (I don't see why it would be useful)
That's also what I think.
Question: ideally, adding the
idon theimgtag would be the best, wouldn't it ? or on thedivof class figure ?
Yes, that would be ideal. The div or img might have already got an id from {#id}.
maybe with
visibility = "hidden"? or anything that could help for Accessibility - I wonder how this empty tag renders.
I don't know how screen readers would read empty tags, either. According to https://stackoverflow.com/a/32854051/559676, it seems that it's fine to use empty tags for layout instead of content.
I'm not sure if visibility = "hidden".
There was a problem hiding this comment.
The div or img might have already got an id from
{#id}.
So it is safer for now to add a special div or span for our id to avoid conflict right ?
We may think more about this if we reimplement the referencing feature based on Lua filter or else.
So let's go with a div ? I am fine with it.
There was a problem hiding this comment.
So it is safer for now to add a special div or span for our id to avoid conflict right ?
That's what I think.
We may think more about this if we reimplement the referencing feature based on Lua filter or else.
My impression is that they already add the id to the figure environment instead of using an invisible anchor span, but I could be wrong (you can double check).
So let's go with a div ? I am fine with it.
Yes, we can revert back to a block span later if we discover any problems.
There was a problem hiding this comment.
My impression is that they already add the id to the figure environment instead of using an invisible anchor span, but I could be wrong (you can double check).
They put the id to the img tag if you add an id using link attributes
❯ pandoc -t html4
{#id}
^Z
<div class="figure">
<img src="https://rmarkdown.rstudio.com/docs/reference/figures/logo.png" id="id" alt="" />
<p class="caption">cap</p>
</div>
|
@yihui I have checked what Quarto is doing. If fact, it adds the id on a wrapping div. <div id="fig:script" class="quarto-figure quarto-figure-center anchored">
<figure class="figure">
<p><img src="images/hopr_0107.png" class="img-fluid figure-img"></p>
<p></p>
<figcaption aria-hidden="true" class="figure-caption">Figure 1.7: When you open an R Script (File > New File > R Script in the menu bar), RStudio creates a fourth pane above the console where you can write and edit your code.</figcaption>
<p></p>
</figure>
<a class="anchorjs-link " aria-label="Anchor" data-anchorjs-icon="" href="#fig:script" style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;"></a>
</div>It surely does this for other feature related to classes but this would be another solution for this. |
This fixes #1155
It seems this is required so that the anchor span stays correctly right after the div of class figure.
@yihui do you have previous experience with this ? Is there another solution ?
tested with
The link correctly send to the top of the header