figcaption positioning is wack

[daveliepmann]

Figure captions, inside figure tags, are not positioning properly under a variety of viewports.

[Zegnat]

I think I am going to have a good look at this later tonight when my schedule clears up. It would be really great to get this solved, as we might be able to repurpose it for tables as well! (No more divs!)

When a table element is the only content in a figure element other than the figcaption, the caption element should be omitted in favor of the figcaption.

From 4.9.2 The caption element, HTML5 spec.

[daveliepmann]

👍

[Zegnat]

I have made a start at Zegnat/tufte-css, but it is extremely crude. Feel free to take a look and see if it sparks any ideas for you. It does somewhat support <720 pixels wide, but vertical margins are still off.

[daveliepmann]

a72d0c3 addressed the immediate egregious errors that were evident on small screens. A more comprehensive solution is still desired.

[daveliepmann]

It would also be of value for me to reread Tufte to take in some of his examples of figures. On a quick skim of The Visual Display of Quantitative Information, I notice many figures actually have no label, since they are introduced in the text. Figure captions in the margin seem restricted to citations that he doesn't introduce in the main body of the text. Sometimes these are aligned with the bottom of the figure, sometimes with the top, according to what is most pleasing to the eye. Again, more rigor and study is required.

[Zegnat]

figcaption is not required inside figure from an HTML point of view, so optional labels shouldn’t really be a problem. A choice of aligning with top or bottom might be harder to work with in CSS…

[crmackay]

you can have the figure caption above or below the image simply by placing the <figcaption> element ahead of the <img /> in the document, as opposed to after it. Here is code pen: http://codepen.io/crmackay/pen/yNdyXz?editors=110

[bolatovumar]

@daveliepmann could you post examples of this issue?

[daveliepmann]

@bolatovumar The essential problem is that figcaption does not now and has never in the past successfully created captions that are aligned identically to sidenotes or margin notes. There's always been at least a tiny discrepancy on all viewports. I've removed uses of and references to figcaption because of this issue. If we can get them identical to marginalia then they'll be reintroduced, which I would like.

[RichardCore37]

Hi, I'm also having a problem with my figcaption displaying an unnecessary space above the text (or my image displaying an unnecessary space below the image. I've tried every fix that appears online - display block, vertical alignment, line heights, etc. but nothing seems to remove it!