Comments (10)
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 div
s!)
When a
table
element is the only content in afigure
element other than thefigcaption
, thecaption
element should be omitted in favor of thefigcaption
.
From 4.9.2 The caption
element, HTML5 spec.
from tufte-css.
👍
from tufte-css.
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.
from tufte-css.
a72d0c3 addressed the immediate egregious errors that were evident on small screens. A more comprehensive solution is still desired.
from tufte-css.
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.
from tufte-css.
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…
from tufte-css.
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
from tufte-css.
@daveliepmann could you post examples of this issue?
from tufte-css.
@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.
from tufte-css.
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!
from tufte-css.
Related Issues (20)
- No styling for table elements anymore? HOT 1
- Tables are all black HOT 2
- navbar support/advice? HOT 1
- links look weird when highlighted HOT 2
- tufte.css and tufte.min.css have different update dates HOT 1
- Inconsistent spacing due to inline labels as sidenote numbers HOT 1
- dark mode HOT 4
- Sidenotes on list items are misaligned
- Lists in sidenotes have body-sized fonts.
- Figcaption text overlays the image on fullwidth iframe-wrapper
- Apply section style to header and footer elements, too
- Embedding superscripts breaks line height.
- Anything in the margin disappears with narrow browser window HOT 2
- Sidenote indexing HOT 8
- .margin-toggle:checked + .sidenote ... {vertical-align: ...}
- Underlines missing at certain zoom levels HOT 8
- sidenote becomes footnote
- Using srcset inside fullwidth figure renders an image that is not full width
- Darkmode background is too dark HOT 2
- Does tufte-css play nicely with screen readers? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tufte-css.