Default margin for figures

[robinwhittleton]

Should figure (as defined in https://standardebooks.org/manual/1.7.0/single-page#7.8.5.2) have a default margin? At the moment we don’t define any margin, and leave it up to the user agent. In browsers (Gecko, WebKit, Blink) this defaults to margin: 1em 40px from the default W3 HTML stylesheet, but we can’t guarantee it I guess.

[acabal]

Yes I suppose we should, since we define margins for other basic elements like <blockquote> and <h#> in core.css. But, if we're going to think about <figure>, then we should sit down and review all of the block level elements that we may have missed the first time around to define default margins for all of them.

[robinwhittleton]

OK, after some research, this is the picture. SE based on either core.css or recommended default styles in SEMOS. UA agents based on default Gecko / WebKit / Blink stylesheets (they seem to agree mostly these days).

Element	SE margin and padding	UA margin and padding
article	-	-
aside	-	-
blockquote	margin: 1em 2.5em;	margin: 1em 40px;
body	-	-
dd	-	margin: 0 0 0 40xp;
div	-	-
dl	-	margin: 1em 0;
dt	-	-
figcaption	margin: 1em;	-
figure	-	margin: 1em 40px;
footer	margin-top: 1em;	-
h1	margin: 3em 0;	margin: 0.83em 0;
h2	margin: 3em 0;	margin: 0.83em 0;
h3	margin: 3em 0;	margin: 1em 0;
h4	margin: 3em 0;	margin: 1.33em 0;
h5	margin: 3em 0;	margin: 1.67em 0;
h6	margin: 3em 0;	margin: 2.33em 0;
header	margin: 1em;	-
hgroup	margin: 3em 0;	-
hr	margin: 1.5em auto;	margin: 0.5em auto;
li	-	-
nav	-	-
ol	-	margin: 1em 0; padding: 0 0 0 40px;
p	margin: 0;	margin: 1em 0;
section	-	-
table	-	-
ul	-	margin: 1em 0; padding: 0 0 0 40px;

[acabal]

OK, so it looks like we're basically on track with default stylesheets, and 40px means 2.5em for us assuming a 16px font size.

The only thing that might be tricky is <ol>. I think that in the default stylesheet the left margin includes space for the actual numbers. But if we have very long numbers, like Decline and Fall's endnotes, forcing a custom margin may screw up any padding changes the browser might make to fit long numbers. What do you think?

[robinwhittleton]

I’d be happy to leave left/right padding to default on ol/ul. The 40px seems to have been designed to just about allow four digit ol numbers at a default font size.

So, proposal:

1. Update the manual figure styling to include margin: 1em 2.5em.
2. Add that to all books in the corpus that have <figure>s.
3. Add ul, ol { margin-top: 1em; margin-bottom: 1em; } to core.css.
4. Update the manual glossary styling to include dl { margin: 1em 0; } dd { margin-left: 2.5em; }.
5. Update all books in the corpus with glossaries to include those styles.

Happy for me to go ahead with that?

[acabal]

Yes, I think that works!

[robinwhittleton]

I was trying to work out why browsers had gone with 40px instead of 2.5em and realised that it’s probably about coping with increased text size. If you’re reading with 5× zoom then the margins on the left and right will appear to be 200px, not 40px. That could, conversely, make it much harder to see the contents of the figure.

So a slight amendment to my proposal: everywhere where I’d written 2.5em I’ll make 40px instead.

[acabal]

OK, that makes sense. Thanks!

[robinwhittleton]

1. Done in next branch in https://github.com/standardebooks/manual/commit/ee8657ede4b8b600877e20b4e9d58dadda7da2cd
2. To follow
3. Done in https://github.com/standardebooks/tools/commit/732c2a1e0f4e4eb2be2f1d720e143dd3910fa0fd
4. Done in next branch in https://github.com/standardebooks/manual/commit/891f20b7d5cbd14da7f809dccc97d1edcd5019e8
5. Done in:

• https://github.com/standardebooks/alexander-mackenzie_journals/commit/30f631a2133ebd96b69dea6f4ea75e31cd4f5f08
• https://github.com/standardebooks/ambrose-bierce_the-devils-dictionary/commit/a323a14c7fa62d53e72d5352c50b787a842bd3de
• https://github.com/standardebooks/apsley-cherry-garrard_the-worst-journey-in-the-world/commit/59d46ac8e310eb418b25a158ea069b809c7ef834
• https://github.com/standardebooks/charles-darwin_the-origin-of-species/commit/5362929680bd50d2a31bcce6e91b661d7354bc2d
• https://github.com/standardebooks/ernest-shackleton_south/commit/ab907454a4ec6d97b6bb3540434f130136a74982
• https://github.com/standardebooks/george-borrow_lavengro/commit/a7cc7d666ab30c70336af9892fb768fc5b8316ce
• https://github.com/standardebooks/giovanni-boccaccio_the-decameron_john-payne/commit/dd9c4390dfaef4b542cc39dd0ac64cea3548014a
• https://github.com/standardebooks/henryk-sienkiewicz_with-fire-and-sword_jeremiah-curtin/commit/3d186c0729e87eee2b9888e7a7c9d31b404c29a1
• https://github.com/standardebooks/samuel-butler-1612-1680_hudibras/commit/00549c17515ff93ff359e4beaa362cacd09ab1c1
• https://github.com/standardebooks/thomas-bulfinch_bulfinchs-mythology/commit/d5b834f7d8389bfa3feb0c80d44d39228c91f809
• https://github.com/standardebooks/thomas-malory_le-morte-darthur/commit/695261568b7a23a02d98b33a0aac08461f39a21b

[robinwhittleton]

OK, I’ve updated the following repos with the new figure styling. In a few cases there was a little more work to do, but usually just CSS tidying.

• agatha-christie_poirot-investigates
• agatha-christie_the-man-in-the-brown-suit
• agatha-christie_the-murder-of-roger-ackroyd
• agatha-christie_the-mysterious-affair-at-styles
• aleksandr-kuprin_short-fiction_s-koteliansky_j-m-murry_stephen-graham_rosa-savory-graham_leo-pasvols
• aleksandr-kuprin_yama_bernard-guilbert-guerney
• apsley-cherry-garrard_the-worst-journey-in-the-world
• aristotle_nicomachean-ethics_f-h-peters
• arthur-conan-doyle_the-lost-world
• arthur-conan-doyle_the-return-of-sherlock-holmes
• charles-babbage_passages-from-the-life-of-a-philosopher
• d-h-lawrence_sons-and-lovers
• daniel-defoe_a-journal-of-the-plague-year
• dante-alighieri_the-divine-comedy_henry-wadsworth-longfellow
• e-nesbit_the-story-of-the-amulet
• edgar-allan-poe_the-narrative-of-arthur-gordon-pym-of-nantucket
• edward-lear_nonsense-books
• edwin-a-abbott_flatland
• emile-gaboriau_monsieur-lecoq
• ernest-shackleton_south
• erskine-childers_the-riddle-of-the-sands
• f-scott-fitzgerald_the-beautiful-and-damned
• fergus-hume_the-mystery-of-a-hansom-cab
• ford-madox-ford_a-man-could-stand-up
• freeman-wills-crofts_the-cask
• freeman-wills-crofts_the-pit-prop-syndicate
• fritz-leiber_short-fiction
• george-bernard-shaw_man-and-superman
• h-g-wells_the-wonderful-visit
• h-rider-haggard_king-solomons-mines
• herman-melville_short-fiction
• hilaire-belloc_the-path-to-rome
• jane-addams_twenty-years-at-hull-house
• jean-toomer_cane
• john-henry-newman_verses-on-various-occasions
• john-muir_my-first-summer-in-the-sierra
• john-reed_ten-days-that-shook-the-world
• jules-verne_journey-to-the-center-of-the-earth_f-a-malleson
• laurence-sterne_the-life-and-opinions-of-tristram-shandy-gentleman
• lew-wallace_ben-hur
• lewis-carroll_a-tangled-tale
• lewis-carroll_alices-adventures-in-wonderland_john-tenniel
• lewis-carroll_through-the-looking-glass_john-tenniel
• lord-dunsany_the-book-of-wonder_sidney-h-sime
• ludwig-wittgenstein_tractatus-logico-philosophicus_c-k-ogden
• m-r-james_short-fiction
• mark-twain_roughing-it
• matthew-henson_a-negro-explorer-at-the-north-pole
• maurice-leblanc_the-hollow-needle_alexander-teixeira-de-mattos
• rudyard-kipling_just-so-stories
• samuel-butler_erewhon
• samuel-butler_the-way-of-all-flesh
• samuel-pepys_the-diary
• sinclair-lewis_babbitt
• solomon-northup_twelve-years-a-slave
• thomas-bulfinch_bulfinchs-mythology
• thomas-hardy_far-from-the-madding-crowd
• thomas-hardy_jude-the-obscure
• thomas-paine_the-rights-of-man
• ulysses-s-grant_personal-memoirs-of-ulysses-s-grant
• victor-hugo_les-miserables_isabel-f-hapgood
• w-e-b-du-bois_the-souls-of-black-folk

So I guess the only thing left to do is to update core.css in every book. I guess you’ve got a nice script to do that?

[acabal]

Yup! I'm updating them all now. Does that wrap it up for this issue?

[robinwhittleton]

Think so 🙂