Website stylesheet, 2020-04-23—Jean Charlot

Website stylesheet, 2020-04-23

Stylesheet used with the Jean Charlot Foundation website.

This stylesheet is documented with intent and use so its features can be understood and evalutated. An HTML document is intended to stand on its own without this stylesheet, visual differences are intended as informative, and traditional navigation within a document is enhanced.

Ultimately, the person viewing an HTML document makes the final decision of how to view it by means of a personal stylesheet. That is inherently how CSS works with HTML, and there is no way of preventing it.

Proposals.

Compatible changes since 2020-04-23.

Color. Always separate from other properties.

Font variants. Always separate from other properties.

Default properties for HTML marks. No IDs, no classes, no color, no fonts.

Required characteristics of a document:

Features:

Displaying scanned documents:

JCF documents.

Stylesheet documents
Classes: css; css-list.

Document views.

Approaches. Per document customization.

The print medium.

# proposals

Re-evaluate detail-title class.

One reference to detail-title class in color section. Probably used with the books in "France" section. Maybe Guerre 1918.

Likely a couple other classes to consider, too. Especially next/previous navigation.

2020-11-12: Supplemental year for chronologies.

The "Exhibitions" listing and the Writings on Jean Charlot: a bibliography book now have supplemental years for their chronological listings. Each year of items is grouped, and the year precedes it along the right edge for easy skimming.

They both use a <dl> listing per year, with the year in a data-year custom attribute for the <dl> mark. The CSS is independent of the mark, so it should be compatible with any block region, f.e. a paragraph <p>.

These chronological listings pertain to events rather than the calendar year, either an exhibition or a publication. In contrast, the JCF news is collected per year (or two), whereby each is sectioned by a heading instead.

Other chronological publication listings by Jean Charlot are candidates for a supplemental year per yearly group.

Considerations for the new approach (or new site CSS rules).

# compatible changes since 2020-04-23

JCF documents

Added color for JCF documents by means of the jcf class, which is mostly just the inverse of the default color. This eliminates the outdated JCF stylesheet.

This stylesheet is also used by the new main index proposal, which is combined with the JCF main index. Still need approval for the combination.

In the mean time, have applied the most recent partial view approach to the current main index.

new approach: partial view of image

New partial view approach for the wide image at the beginning of some documents. However, as yet to be used, because the approach depends on the image size (and the ::before pseudo-region), thereby is preferably applied within a document. It is either a first step towards a new feature, or will be merely a documented approach. Only a few documents begin with such an image.

2020-07-22: image documents

Obsoleted the "image-then-credit" class. Instead, no additional mark for the image; just an <img> directly within the <body> region. Use a normal paragraph for the photo credit, when there is one. No centering; visibility on left edge of document preferred.

2020-09-18: New class illustration.

The class doc_illustration emerged within the "Jean Charlot's Nativity at the Ranch" document. It purposefully and effectively coordinates an illustration and its brief description with nearby (later) paragraphs. The recently revised JCF documents also used a very similar approach based on that class from that document.

Have added the new illustration class and revised the aforementioned HTML documents.

2020-09-23: Refined previews.

The content (f.e. a <dl>) of a preview list item provided padding as the single measurement for all bounds of the list item itself: padding, border, and margin. Absolutely positioning the ::before pseudo-region of the list item onto that padded area from the content visually divided it as padding-border-margin.

That was helpful with calculations and alignment when @media queries were used for various view sizes in the previous stylesheet, prior to the revision of the sample-list class into previews. However, that is a novel use of @media queries when views are personally resizable. Accessibly, options for alternate arrangements should be provided for personal selection rather than automatically asserted with no regard of personal desires.

Overall, the previews class has been compatibly restyled, t.i. no changes to the HTML marks required. Note this was possible because the marks had been applied like punctuating handwriting rather than compartmentalizing for appeasing the inadequacies of the CSS recommendations.

2020-09-24: Revised document additions feature.

The data-date attribute of document additions has only one use, so the CSS rules are now independent of the mark type.

List items in a preview list no longer need special treatment with the position property in the <style> region of a document, because of its recent refinement. The recommendations of document styles for document additions in lists have been updated.

# color

Summary: Shapes emerge from the difference of color, with darkness unseen and light attracting attention. Contrasting more than two colors is nigh impossible, and an excess of differences muddies importance.

For congruency of color, group all the selectors for a specific property/value pair once. For example, one rule with all selectors for a specific background color.

Voids 
*/
html
,/*Partial view of an image*/
.partial-view
+p
{background-color:#000}
/*
Default background 
*/
body
,/*Link in a note.*/
a[tabindex]
+ins
>a
,/*Index links.*/
body
>hr
~hr:last-of-type
~p
>a
{background-color:#ba9}
/*
Neutral background 
*/
/*An illustration.*/
.illustration
,/*Image previews.*/
.previews
>li
,/*Image documents.*/
.imagery
{background-color:#999}
/*
More contrast for hyperlinked text . . . 
*/
/*Hyperlinks in
previews.*/
.previews
a
,/*Hyperlinks in
image documents.*/
.imagery
a
{background-color:#ddd}
/*
. . . except for short linked images
because the tall line-height
reveals a blank line 
*/
/*No contrast for blank line.*/
.previews
>*>*
>dt
>p:first-of-type
>a
{background-color:inherit}
/*
Inherit background color for
a fragment link in a heading
*/
h1
,h2
,h3
,h4
,[\#]
{background-color:inherit}
/*
Default foreground 
*/
body
,hr
{color:#000}
/*
Hyperlink foreground 
*/
a
,:link
,:visited
{color:#009}
/*

Emphasize by inverting background and foreground.

A note 
*/
a[tabindex]
+ins
{background-color:#000
;/*A little more contrast.*/
color:#edc}
/*
A linked missing image
with an alt attribute
(or tall line-height) 
*/
a
>img
{background-color:#009
;/*A little more contrast.*/
color:#edc}
/*

Use the emphasis color as a background for emphasizing outside the content, f.e. document title or named locations. 

Emphasis background
*/
/*Document title.*/
body
>h1:first-child
,/*Named locations
emphasis.*/
:target~[\#]
,/*Index links.*/
body
>hr
~hr:last-of-type
~p
{/*Same as emphasis color.*/
background-color:#402}
/*
Foreground for
emphasis background
on default background 
*/
/*Document title.*/
body
>h1:first-child
,/*Named locations
emphasis.*/
:target~[\#]
{/*Brighter than
default background.*/
color:#edc}
/*
Foreground for
emphasis background
on neutral background 
*/
/*Document title in
image docs.*/
.imagery
>h1:first-child
,/*Named locations in
image docs.*/
.imagery
:target~[\#]
,/*Named locations in
a list of previews.*/
.previews
:target~[\#]
{/*Brighter than
neutral background.*/
color:#eee}
/*

Color for borders and outlines.

Body border 
*/
body
{border-right-color:#ba9
;border-left-color:#999}
/*
Title border 
*/
body
>h1:first-child
{border-color:#999}
/*
Linked images and
interactions 
*/
a
>img
,:focus
{/*Match hyperlink color*/
outline-color:#00c}
/*
Fragment links for
named locations 
*/
h2 :target~[\#]
,h3 :target~[\#]
,h4 :target~[\#]
{border-color:#999}

.previews :target~[\#]
{border-color:#ddd}
/*
Imagery
*/
.imagery
,.previews
{border-color:#999}

img
,.partial-view
{border-color:#000}
/*
Faux borders for
a list of previews
*/
.previews
>li
,.previews
>*>*
>dd
+dt::before
,.previews
>*
>dl
{border-color:#ddd}
/*

Leftover class, needs re-evaluation. Probably Guerre 1918. 

Title in a detail list.
(Yet to be re-evaluated.)
*/
.detail-title
{background-color:inherit}
/*

# color for JCF documents

Pretty much just swapping the roles of the default color pair and emphasis color pair. Illustrations are outlined with a darker gray for less contrast with the darker background.

JCF background 
*/
.jcf
,/*Index links.*/
.jcf
>hr
~hr:last-of-type
~p
>a
{/*Same as default
emphasis color.*/
background-color:#402}
/*
JCF foreground 
*/
.jcf
,.jcf
hr
{color:#edc}
/*
Hyperlink foreground 
*/
.jcf a
,.jcf :link
,.jcf :visited
{color:#0cf}
/*
JCF emphasis background
*/
/*Document title.*/
.jcf
>h1:first-child
,/*Named locations
emphasis.*/
.jcf
:target~[\#]
,/*Index links.*/
.jcf
>hr
~hr:last-of-type
~p
{/*Darker version of
JCF foreground color.*/
background-color:#ba9}
/*
Foreground for JCF emphasis
*/
/*Document title.*/
.jcf
>h1:first-child
,/*Named locations
emphasis.*/
.jcf
:target~[\#]
{color:#000}
/*
An illustration
*/
.jcf
.illustration
{background-color:#444
;color:#fed}
/*

JCF borders and outlines.

Body border 
*/
.jcf
{border-right-color:#402
;border-left-color:#444}
/*
Title border 
*/
.jcf
>h1:first-child
{border-color:#444}
/*
Interactions 
*/
.jcf
:focus
{/*Match hyperlink color*/
outline-color:#0cf}
/*
Fragment links for
named locations 
*/
.jcf
h2 :target~[\#]
,.jcf
h3 :target~[\#]
,.jcf
h4 :target~[\#]
{border-color:#444}
/*

# color for stylesheet documents

Some adjustments for fitting the rules for CSS stylesheets with this website stylesheet. 

A sample matches
its environment
*/
.sample>dd
{border-right-color:#ba9
;border-left-color:#999}
/*
Emphasis
*/
code
,kbd
,var
{background-color:#ba9
;color:#402}
/*

# color for the print medium

*/
@media print
{
/*
General markup
*/
*
{background-color:#fff!important
;color:#000!important}
/*
*/
}
/*

# font variants

Summary: Minimize visual complexity by tracking all font variants, other than size or line height.

The system font is preferred for documentation because it is probably well designed or comfortably familiar.

Web browsers typical use 16px as default font size, so 1em is likely 16px. Changing the font size from the web browser default affects the @media queries for responsive layouts.

Only Safari treats "rem" properly by using the font size set for the <html> mark, thereby responding properly during view resizing. (Oddly, that is considered incorrect by its developers and other web browser developers, so it is likely to change.) Other web browsers treat "em" and "rem" the same for @media queries thereby preventing even a personal stylesheet from overriding the font size in the inaccessible user agent stylesheets of web browsers.

Therefore, leave at the default size (t.i. font-size:1em) and trust the person viewing the document to use the "View" menu, zooming, or font sizing buttons when desired. (Some web browsers even save that setting per website.) That is compatible with @media queries. 

Default
*/
html
{font-family:
FreeSans
,system-ui
,-apple-system
,/*Mac OS X+*/
"Avenir Next"
,"Helvetica Neue"
,/*MS Windows+*/
"Segoe UI"
,SegoeUI
,"Lucida Sans"
,/*any OS*/
Arial
,sans-serif}
/*
Section headings
*/
h1
,h2
,h3
,h4
{font-weight:normal}

/*A note.
(OTOH, put the note
someplace else.)*/
a[tabindex]:focus
+ins
,a[tabindex]:hover
+ins
{font-weight:normal}
/*
Lead-ins and brief hypertext
*/
/*To a note in a note list.*/
[href^="#note_"]
,/*More contrast for a link
in the description
of an illustration.*/
.illustration
>a[href]
,/*References to WJC:b*/
.jmr-wjcb>a::first-letter
,/*Book navigation.*/
nav a
,/*Document relations.*/
body
>hr:last-of-type
+dl
>dt
{font-weight:600}

/*References to WJC:b*/
.jmr-wjcb
>a.non-alphanumeric::first-letter
{font-weight:normal}
/*
Numeric variants
*/
/*Document title
in image docs.*/
.imagery
>h1:first-child
,/*Book navigation.*/
nav
{font-variant-numeric:
tabular-nums}

/*Names in document title
of image docs.*/
.imagery
>h1:first-child
>i
{font-variant-numeric:
normal}
/*
A fraction
*/
/*The forward slash,
as the fraction bar.*/
.fraction
+span
,.mixed-fraction
+span
{font-style:italic}
/*

# default properties for marks

Summary: Default property values for font size, line height, spacing, borders, placement, etc., therefore neither classes nor IDs. No color nor font variants.

Distinctive shapes enable using only one highlight color, when at all. Therefore, emphasize with symbols and punctuation, or with the traditional spacing and font variants from marks. 

View
*/
body
{line-height:1.25
;/*Book width or
2 article columns.*/
max-width:40em
;/*Sometimes helps
minimize default.*/
height:intrinsic
;padding:0
;border-style:none solid
;border-width:.5em
;margin:0 0 1em}
/*
Sectioning
*/
h1
,h2
,h3
,h4
{margin-top:1.25em
;margin-bottom:.625em}

hr
{clear:both
;padding:0
;border-style:solid
;border-width:.125em 0 0
;margin:1.25em 0 0}
/*
Heading sizes
*/
h1
{font-size:2em}

h2
{font-size:1.9em}

h3
{font-size:1.6em}

h4
{font-size:1.4em}
/*

Paragraphs are no wider than the text in a book. Maintain two spaces after a sentence period and the occasional newline. Adjust superscript and subscript in order to prevent web browsers skewing the line spacing. 

*/
p
{white-space:pre-wrap
;max-width:40em
;margin:0}

blockquote
{padding:.25em 0 .25em .4em
;border-left-style:solid
;border-left-width:.125em
;margin:.625em 0 0 .25em}

img
{vertical-align:bottom
;border-style:solid
;border-width:.125em}
/*
Override traditional
faulty line spacing
of superscripts
and subscripts
*/
sup
{font-size:.8em
;vertical-align:baseline
;position:relative
;bottom:.4em}

sub
{font-size:.8em
;vertical-align:baseline
;position:relative
;bottom:-.2em}
/*
Interactive emphasis
(keyboard)
*/
kbd
{display:inline-block
;/*Boxed and inline,
so need smaller text.*/
font-size:.8em
;padding:0 .2em .1em
;outline-style:solid
;outline-width:.0625em
;margin-right:.1em
;margin-left:.1em}
/*
Lists
*/
dl
{margin:0}

dd
{margin-left:1em}


ol
{padding-left:2em
;margin:1.25em 0 0}

ul
{padding-left:1.2em
;margin:.3125em 0 0}
/*

# contextual rules for marks

Property values for marks based on their contextual relationships with one another within a document. Generally, rules with CSS selectors using combinators: space, >, +, ~, etc. 

Link to a
non-HTML document.
*/
a[href$=".pdf"]::after
{content:" [PDF]"}

/*Any TIFF images
needs to be in a document.
However, this will do for now.*/
a[href$=".tiff"]::after
,a[href$=".tif"]::after
{content:" [TIFF]"}
/*
Paragraphs
*/
*+p
{margin-top:1.25em}

body
>blockquote
{margin-right:1em
;margin-left:1.25em}
/*
Lists
*/
*+dl
{margin-top:1.25em}

dd+dt
{margin-top:1.25em}

*+dd
{margin-top:.625em}

*+li
{margin-top:.625em}
/*

# document title

Summary: Every document begins with a title marked as <h1>, followed by a horizontal rule <hr>.

Notably, typing the spacebar shifts the document up (a.k.a. "page down"). Some web browsers also ensure about two lines worth of area from the bottom of the view is still visible at the top of the view afterwards. The document titles are pinned to the top as normal sized text, thereby without obscuring subsequent text. 

Document title
*/
@media screen
{

body
>h1:first-child
{font-size:1em
;line-height:1
;text-align:left
;padding:.25em 0
;border-bottom-style:solid
;border-width:.125em
;margin:0
;position:fixed
;top:0
;right:0
;left:0
;z-index:1}

}
/*
Subtitle
*/
/*Not tested recently.
See M&S section,
"Way of the Cross"
locations.*/
body
>h1:first-child
>small
{font-size:.75em
;display:block}
/*
Divider
*/
body
>h1:first-child
+hr
{height:1.625em
;border-style:none
;margin:0}
/*

# index

Summary: Consolidate links to related documents at the bottom of a document, and for the main index of the website.

Markup:
<hr>
<dl>
<dt>More in:
<dd><a href="some-doc.html">a document linking to this one</a>
</dl>
<p><a href="contact.html" rel="author copyright"><b>Contact</b></a>
<br>
<a href="index.html" rel="start"><b>Main index</b></a>

After the final horizontal rule <hr> before the paragraph of final links can be a <dl> listing related links for the document, returning to other documents on its website linking to it. Its <dt> has "More in:", and each <dd> has a link with a relative path.

The final paragraph has a link for returning to the main index. Additional links might as well be in the main index document instead, but can be delimited by a <br> mark.

# rules for the index links

Each final link is padded for emphasizing by its shape and for selecting with a pointer. The text is drawn with thicker lines to reduce its diminuitive appearance amongst the large empty areas. In this case, the bottom border of a link is unusable as an underline (per the revised hyperlinks), so the bottom border of the bold mark <b> is used instead. 

Divider
*/
body
>hr
~hr:last-of-type
+dl
{margin-bottom:1.25em}
/*
Region of final links
*/
body
>hr
~hr:last-of-type
~p
{white-space:normal
;max-width:none
;padding-top:.5em
;margin-top:0}
/*
Enlarge selectable area
*/
body
>hr
~hr:last-of-type
~p
>a
{display:inline-block
;padding:.5em 1.25em .75em 0
;border-radius:0 3em 3em 0
;/*Counter default links.*/
border-style:none
;/*Increase distance
between links.*/
margin-top:1.25em}
/*
Underline on the inside
*/
body
>hr
~hr:last-of-type
~p
>a
b
{border-style:solid
;border-width:0 0 .125em}
/*

# hyperlinks

Summary: Bottom border for hyperlinks rather than underlining, with a dashed line for fragment links within current document. Named locations are discovered and emphasized by their own fragment links. Attribute: #.

An HTML mark with an id attribute is a named location within an HTML document, and is most useful when it is shown with a fragment link. A URL address with an octothorp "#" followed by a named location is a "fragment link", the "#" demarcating its fragment.

# a location and its fragment link

Summary: Ensure a gap from the top of the view for a targeted named location. Emphasize a targeted named location with its nearby fragment link. Attribute: #.

Sample:

A paragraph after a named location. A fragment link to that location.

# A paragraph with a named location and its own fragment link.

Markup:
<a id="example_hyperlinks_basics-1"></a>
<p>A paragraph after a named location. A <a href="#example_hyperlinks_basics-1">fragment link to that location</a>.
<p><a id="example_hyperlinks_basics-2"></a><a href="#example_hyperlinks_basics-2" #>#</a> A paragraph with a named location and its own fragment link.

Though a named anchor <a id="..."> could be its own fragment link, they represent two different tasks.

For these rules, named locations are empty and a fragment link marks the symbol "#" as a mnemonic of its fragment. One or more named locations can be listed (f.e. retaining obsoleted names), then an optional fragment link with # as an attribute (without a value).

# rules for a location and its fragment link

An HTML viewer (f.e. web browser) shifts a document so a targeted anchor is at the top of the view, giving the impression there is nothing afore. The document titles on this website are pinned to the top, too, thereby overlapping targeted locations. Ensuring a gap at the top of the view for a targeted anchor resolves both circumstances.

Unfortunately, simply positioning the anchor itself with its position property as "relative" does not change the location targeted in the document, even though the anchor itself will be moved. This is seemingly because an anchor is by default displayed inline rather than as a block.

So, a named anchor has display set to either "block", or "inline-block" (and likely vertical-align to "top"), and its position to "relative". Or, the named anchar has only the position set to "absolute" and is within a positioned region. The former is preferred for its independence. 

Any named location
*/
a[id]:empty
{display:inline-block
;vertical-align:top
;position:relative
;top:-1.8em
;top:-3rem}
/*
Hyperlinks
*/
a
{text-decoration:none
;border-width:0 0 .125em}

:link
,:visited
{border-style:solid}

/*A fragment link to
its own document*/
[href^="#"]
{border-style:dashed}
/*
A fragment link
at its own location
*/
[\#]
{padding-right:.2em
;padding-left:.5rem
;border-radius:100%
;border-width:.125rem
;border-top-width:0
;border-left-width:0
;margin-left:-.5rem}

/*A paragraph after
a fragment link.*/
[\#]+p
{margin-top:0}
/*
A linked image
*/
a>img
{outline-offset:.125em
;outline-style:solid
;outline-width:.125em}
/*
Interactions
*/
[tabindex]
{border-style:dotted}

/*Tab-selection with TAB button.
(Because default is sometimes
indiscernible.)*/
:focus
{outline-offset:.0625rem
;outline-style:double
;outline-width:.1875rem}
/*

# fragment links of headings

Summary: Headings are ideal for named locations and their fragment links. Attribute: #.

Sample:

# example of a heading with its fragment link

A section of information.

Markup:
<h3><a id="example_named-locations_headings"></a><a href="#example_named-locations_headings" #>#</a>
example of a heading with its fragment link</h3>
<p>A section of information.

Probably best to keep the fragment link immediately after the named location, with no spaces. Seems easiest having the section name on a second line, conveniently resulting in a space between the fragment link and name in an HTML viewer.

# rules for fragment links of headings

Locations are typically at beginning of a heading, and sometimes on a separate line. The extra space is noticeable before the heading text when without a fragment link. 

A location for a heading
*/
/*No extra space when
no fragment link.*/
h2 a[id]:empty
,h3 a[id]:empty
,h4 a[id]:empty
{display:block}
/*
A fragment link for a heading
*/
h2>[\#]
,h3>[\#]
,h4>[\#]
{border-radius:0 0 50%
/ 0 0 100%}
/*

# notes and their lists

Summary: A parenthetical remark conveniently remains in the flow of reading, optionally hidden then revealed when the prior phrase is focused or pointer-hovered. Alternatively, move aside or copy to a note list for the document or for a section.

Notes emerge naturally as supplementary details and addenda. Short phrases might be comma-delimited ",", or within parentheses "( )", or demarcated by em dashes "—". Longer statements and sentences might be within square brackets "[ ]".

Optionally, mark the info for contracting it within the flow of the content, and mark its preceding relevant phrase for temporarily revealing the contracted info. Or, move the comments to a notes list at the end of a document, or for each section. CSS rules for both possibilities are compatible with each other.

# a note, detail, or remark

Summary: A note hidden in place is revealed by interacting with the preceding relevant phrase.

Sample:

A sentence with a note about something [A note relevant to the phrase "about something", perhaps a bibliographical reference to a document.] and maybe some more.

A sentence with a hidden note about something [A note relevant to the phrase "with a hidden note about something", perhaps clarifying with more context.] and maybe some more.

Markup:
<p>A sentence with a note about something [A note relevant to the phrase "about something", perhaps a bibliographical reference to a document.] and maybe some more.
<p>A sentence <a tabindex="0">with a hidden note about something</a><ins> [A note relevant to the phrase "with a hidden note about something", perhaps clarifying with more context.]</ins> and maybe some more.

A note marked with <ins> [Include the preceding space character within the mark, too.] is hidden when its prior relevant phrase is marked with <a> and has the tabindex attribute [always set to zero "0"]. Either tab-selecting [with the TAB button] or pointer-selecting [or merely pointer-hovering] the marked relevant phrase reveals the note.

Optionally add the hidden attribute to a marked note that is also in a note list for compact viewing when without CSS.

<p>A sentence <a id="note-ref_3"></a><a tabindex="0">with a hidden note about something</a><ins hidden> [A note relevant to the phrase "with a hidden note about something". Copied to the note list.]</ins><a href="#note_3">[3]</a> and maybe some more.

# rules for a note, detail, or remark

Hide a note
*/
a[tabindex]+ins
{text-decoration:none
;display:none
;margin-left:.25em}
/*
Reveal a note
when focused
or pointer-hovering
*/
a[tabindex]:focus+ins
,a[tabindex]:hover+ins
{/*Just in case note
is in a header.*/
font-size:1rem
;/*For any sentences.*/
white-space:pre-wrap
;display:inline}
/*

Sometimes the title of a document is given a note, typically at the very end of the title name. That is an unnecessary and awkward use of a footnote or endnote. Such a note typically describes the source of the document or explains the title itself. Instead of hiding introductory information, simply precede the document with the text from that note, and leave it out of the note listing.

In other words, introduce the titled document. Consider following the introduction with a horizontal rule <hr>. 

This style needs to be obsoleted
and removed.
Please consider introducing the document
at its beginning rather than deferring
its description elsewhere.
*/
/*A note reference in a heading
is assumed at the end of the line.
Regardless, a note reference in the title
is very awkward.*/
h2
>a[tabindex]:focus
+ins
,h2
>a[tabindex]:hover
+ins
{display:inline-block}
/*

# a note list

Summary: Linking to a note in a note list is basic hypertext marking. Mark a named location with <a id="..."> and mark a link to it with <a href="#...">. Mark a list as <ol> for automatic numbering.

Formally for these CSS rules, all that really matters is the prefix of the named location: "note-ref_" for references and "note_" for notes. Anything beyond the prefix is for making the id unique, and is ignored by the CSS.

IDs: note_ + section name (if any) + note number; note-ref_ + section name (if any) + note number.

Sample:

A sentence with a note about something[1] and maybe some more.

A sentence with a hidden note about something [A note relevant to the phrase "with a hidden note about something". Copied to the note list.][2] and maybe some more.

# Notes

  1. A note relevant to the phrase "about something". Moved to the note list.

    ^reference

  2. A note relevant to the phrase "with a hidden note about something". Copied to the note list.

    ^reference
Markup:
<p>A sentence with a note <a id="note-ref_1"></a>about something<a href="#note_1">[1]</a> and maybe some more.
<p>A sentence <a id="note-ref_2"></a><a tabindex="0">with a hidden note about something</a><ins> [A note relevant to the phrase "with a hidden note about something". Copied to the note list.]</ins><a href="#note_2">[2]</a> and maybe some more.
<h2><a id="notes"></a><a href="#notes" #>#</a>
Notes</h2>
<ol>
<li>
<a id="note_1"></a>
<p>A note relevant to the phrase "about something". Moved to the note list.
</p>
<a href="#note-ref_1">^reference</a>
<li>
<a id="note_2"></a>
<p>A note relevant to the phrase "with a hidden note about something". Copied to the note list.
</p>
<a href="#note-ref_2">^reference</a>
</ol>

Copy or displace a note to a note list. Unlike other named locations there is no emphasis of a targeted note nor of a targeted note reference, because they are parenthetical.

Add a section name for making the named locations unique amongst multiple note listings in the same document. Perhaps "bib" for a bibliography listing [typicallay a sequence of paragraphs rather than a list]. Consider hyphenated numbers for multiple references of the same note.

<p><a id="note_bib_1"></a>
. . .
<br><a href="#note-ref_bib_1-1">^reference-1</a>, <a href="#note-ref_bib_1-2">^reference-2</a>
<p><a id="note_bib_2"></a>
. . .

The named location for the note in the note listing is at its very beginning, before any of its text. Links to references are after the final paragraph of the note. For clarity, consider using a caret "^" prepended to "reference" for a link from the list item leading to its reference, and a hyphenated number when multiple: "^reference"; or "^reference-1".

Consider using the note number in square brackets, f.e. "[1]", for the link leading to the note list item. The named location for that reference is before its link to the note, perhaps inserted before the relevant text that evoked the reference.

Ideally, a note listing is preceded with a heading and a link to the listing is provided at the beginning of the document. Perhaps named as "Notes" with its named location id as "notes".

Section notes are at the end of its section, with a heading probably named 'Notes for "Name of Section"'. The section name (and quotes) can be conveniently linked to the section heading.

# rules for a note list

See also the color and font variants. 

First paragraph
in a note list item
*/
[id^="note_"]+*
{margin-top:-1.25em}
/*
Separate multiple references
listed at end of a note
*/
[href^="#note-ref_"]
+[href^="#note-ref_"]
{margin-left:.5em}
/*

# illustrations

Summary: Supplement text with an illustration no wider than half the maximum line length. Maintain at least one-third the maximum line length for adjacent regions when view is resized. Class: illustration.

Single illustration:
<p class="illustration"><img src=". . ." width="300"><br>Description
<p>Next paragraph.
Multiple illustrations:
<p class="illustration"><img src=". . ." width="300">
<br><img src=". . ." width="300">
<br>Description
<p>Next paragraph.
List of illustrations:
<ul class="illustration">
<li><!-- A paragraph mark is optional. -->
<p><img src=". . ." width="300"><br>Description
<li>
<p><img src=". . ." width="300"><br>Description
</ul>
<p>Next paragraph.

Text book width is about 40em or 80 characters. Magazine/newspaper column width is 20em, with 5–7 words as minimum at ≈12em. That means one-third text book width is about the minimum line length used in newspapers.

The default font size in web browsers is typically 16px/1em. An illustration for half the line length, with padding, will be shown as 300px wide. However, the image itself is up to twice that width for accommodating double-resolution displays.

# rules for an illustration

An illustration is floated to the right because the text flows left-to-right. Thereby, each line of text always starts from the left edge rather than traversing an obstacle course around the illustration.

The width of a floated region reduces the line length of later regions for the full height of the floated region. Ideally, a min-line-length property would assert the minimum line length within a region. That would lead to a region shifting beyond a floated region that reduced its line length beyond its minimum.

As that property is nonexistent, the current hack asserts the minimum line length for a region with em-space (Unicode 2003 or &#x2003;) characters in its ::before pseudo-region. Then the later regions become shifted by the shifting of the first region. 

Paragraph for
an illustration
*/
.illustration
{text-align:right
;width:17.75em
;padding:.5em .5em .25em
;margin-right:-.5em
;margin-left:.5em
;float:right}

.illustration
img
{width:17.5em
;height:auto
;border-width:.125em
;margin:0}
/*
Faux min-line-length
*/
.illustration
+::before
{/*An em-space character
for every em of
minimal width (13em).*/
content:"             "
;font-size:1rem
;line-height:0
;display:block}
/*
A list of illustrations
*/
ul.illustration
{margin-top:1.25em
;list-style:none}
/*

# document additions

Summary: Narrow the content of a document by the date of additions. Intended for items added some time later than the creation of the document. Intended as completely unnoticeable within a document when CSS is unsupported. IDs: most-recent; added_(hyphenated 8-digit date). Custom attributes: [The HTML recommendation suggests prefixing names of custom attributes with "data-".] data-date—hyphenated 8-digit date; data-added—space-delimited list of hyphenated 8-digit dates.

Document additions are given dates of when they were added within the custom data-added attribute, wherewith they are viewed singly as a group of same dated additions while hiding other additions.

Targeting an anchor named with the date prefixed with "added_" hides the dated additions without that date. When such a fragment link is active, a message at the beginning of the document indicates whether the set is the most recent additions or a set of earlier additions.

Two default links are at the end before any document relations. One is the fragment link #most-recent that reveals the most recent additions, and the other is a link to the document itself which in effect reveals everything again.

More specifically, the date of additions is used in all three attributes merely for simplicity and consistency. The "added_" prefix for the id of these named anchors reveals intent, wherewith a fragment link targeting the named anchor locates all relatedly dated items.

Therefore, the general approach can be used generally for anything, because the custom "data-" attribute values could be anything (even different from each other) and are used only with the CSS declared within the document, never from this stylesheet.

Nonetheless, this feature is for only "document additions", therefore any other use of this approach requires its own documentation of intent and use.

# preparing document additions

A date for the these attributes is a four-digit year, then a two-digit month, and then a two-digit day, delimited by hyphens, f.e. 2001-01-01 for 2001 January 1. However, there is no need for this stylesheet to match the date in the values of these attributes. Only the name of these three attributes are matched, or the prefix "added_" of the value of the id attribute. It is only the rules in a <style> region of the document itself that matches the date in the values of these three attributes.

New content has a data-added attribute with the same date as the aforementioned data-date:

<p data-added="2017-11-05">
<dl data-added="2017-11-05">

A space-delimited list of dates is allowed for anything that needs to be visible for differently dated additions but hidden for other dated additions, f.e. a heading.

<h2 data-added="2017-10-01 2017-11-05">. . .</h2>

Items originating with the creation of the document have the data-added attribute without any dates. Those items are hidden when any dated item is targeted, because non-dated items have no value for matching.

<p data-added>

Note: Any mark without the data-added attribute at all is neither hidden nor revealed by these rules.

Before any dated content, usually after the introduction, is a set of anchors named with dates prefixed with "added_". Each dated anchor is followed by an empty <em> region with a date recorded in its data-date attribute, which is used in the message revealed for that set of additions. The first pair has the most recent date, and is preceded by the #most-recent anchor.

<a id="most-recent"></a>
<a id="added_2017-11-05"></a><em data-date="2017-11-05"></em>
<a id="added_2017-11-01"></a><em data-date="2017-11-01"></em>

A document with additions has the CSS rules for its own dated additions within a <style> region, wherewith the additions matching the value in the data-added attribute are revealed. The tilde-equal pair ~= is used for matching within the data-added attribute value, because there can be a space-delimited list of dates as aforementioned. Notice that is distinct from the tilde ~ as a selector combinator.

<style> 

/*  Same date for most recent and newest additions.  */
#most-recent:target~[data-added~="2017-11-05"]
,#added_2017-11-05:target~[data-added~="2017-11-05"]

,/*  Earlier additions.  */
#added_2017-11-01:target~[data-added~="2017-11-01"]

{position:static
;visibility:visible}
</style>

Alternatively, new items might be in a list of previews. The rules for revealing the items would need to account for the list items within the list, and restore the position to "relative" instead of "static". The tilde-equal pair ~= for attribute value matching works but is likely unneeded, because a list item likely has only one date for itself. Note that headings are outside the list region and will need their own CSS selector for the rule.

<style> 

/*  Same date for most recent and newest additions.  */
#most-recent:target~*>[data-added="2017-11-05"]
,#added_2017-11-05:target~*>[data-added="2017-11-05"]

,/*  Earlier additions.  */
#added_2017-11-01:target~*>[data-added="2017-11-01"]

{position:relativestatic
;bottom:none
;visibility:visible}
</style>

The default links for the document additions are inherently after the content, because the document is about the content rather than merely the latest updates for it. Yet, they are also before the document relations and indexing. A couple of blank lines helps delineate them from the main content. However, their location within the document has no bearing on the CSS rules.

Both links are empty because hiding/revealing works only when CSS is functioning in an HTML viewer. The title for the link to most recent additions has their date, and maybe the count of items [Using CSS for automatically (and correctly) counting the items was an unnecessary complication, as the count can be edited when modifying the document with more additions. Also, consider using "ESC x how-many" in emacs. Besides, the count is optional.]. The title for viewing all content is "View all". The titles are used from CSS as the text for the links.

<br>
<br>
<br><a href="#most-recent" title="2017-11-05 (3 of 12)"></a>
<br><a href="name-of-the-document.html" title="View all"></a>

# rules for document additions

Position dated anchors at the top of the document so a targeted set is introduced by the introduction. 

Position dated anchors
at top of document
*/
#most-recent
,a[id^="added_"]:empty
{position:absolute
;top:0}
/*

The region immediately after the targeted date anchor has a data-date attribute used for revealing the date of the targeted set of additions in a message. It is typically marked as an empty <em> region, but the rules are independent of the mark type because the attribute is used for nothing else. 

Hide the dates
*/
/*Nuke them from space.
It is the only way to be sure.*/
[data-date]
{display:none}
/*
Display message
for the targeted set
*/
#most-recent:target
+*
+[data-date]
,:target
+[data-date]
{display:block
;margin-top:1.25em}
/*
Generic message
*/
:target
+[data-date]::before
{content:
"Added on "
attr(data-date)
"."}
/*
Message for most recent,
overrides generic message
*/
#most-recent:target
+*
+[data-date]::before
,#most-recent
+:target
+[data-date]::before
{content:
"Most recent additions as of "
attr(data-date)
"."}
/*

Hide all items when any set is targeted, including subregions such as list items. Reliably resetting the display property is impossible (as of 2020-04), as that requires the generally unsupported "revert" value. Instead, all regions with the data-added attribute are positioned beyond the view, as well as hidden so tab selection will skip them.

Then, the rules within a <style> region of the document itself reveal the data-added regions relevant to the targeted date anchor. 

Selectors for
adjacent regions after
a targeted additions anchor . . .
*/
#most-recent:target
~[data-added]
,[id^="added_"]:target
~[data-added]
/*
. . . and any subregions of
adjacent regions after
a targeted additions anchor
*/
,#most-recent:target
~* [data-added]
,[id^="added_"]:target
~* [data-added]
/*
Position and hide
beyond the view
*/
{position:absolute
;/*Beyond the top
of the document.*/
bottom:100%
;/*Prevent tab selection
of links within these regions.*/
visibility:hidden}
/*

Reveal/hide the default links for most recent additions and viewing all. The link for the most recent additions is hidden only when the anchor for most recent additions is targeted. The link for viewing all is shown only when any set of additions is targeted.

The links fail in Internet Explorer 8 (IE8) because it is without the :target selector for CSS; and it does have @media, but not queries. Prevent showing the unusable links in such a circumstance by using a @media with the innocuous query "min-width:0" to reveal them. 

*/
@media (min-width:0)
{
/*
The text for the link
to most recent additions
*/
/*Title is likely the date,
and maybe the count.*/
[href="#most-recent"]:before
{content:
"Most recent additions, "
attr(title)}
/*
No need for "most recent" link
when its set is targeted
*/
/*Targeted by its anchor.*/
#most-recent:target
~[href="#most-recent"]
,/*Targeted by its date.*/
#most-recent+:target
~[href="#most-recent"]
{display:none}
/*
The link to view all items
when any dated set is targeted
*/
[title="View all"]::before
{content:attr(title)}

[title="View all"]
{display:none}

#most-recent:target
~[title="View all"]
,[id^="added_"]:target
~[title="View all"]
{display:inline}
/*
Hide blank line that is
between both messages 
*/
[href="#most-recent"]
~br
{display:none}
/*
Restore blank line when
both messages are shown 
*/
#most-recent
+*
~[id^="added_"]:target
~[href="#most-recent"]
~br
{display:inline}
/*
*/
}
/*

# a phrase

Summary: Delay breaking apart a group of words. Ideally, there would be a briefly named mark, such as <f> (for "phrase"), with the expectation of being common and nested. Attribute: f.

Ideally, there would be a mark for delaying the breaking of a region of text, by breaking before and after the region first. Eventually, the region will be at the beginning of a line when the width of the region it is within is too narrow for its own full width. Only then is that phrase region broken apart normally.

In other words, the region stays whole until it occupies a whole line by itself, then it will wrap when the line is too narrow for it. Of course, there can be other similar regions marked within it, and their wrapping would be similarly delayed, t.i. wrapped after the regions they are within have become too narrow for them.

In the mean time, mark such a phrase with <span> and add the f attribute (no value needed). On the other hand, use a nonbreaking space to prevent any breaking at all.

Discommodities:

# rules for a phrase

A phrase
(Someday a new mark: <f>)
*/
/*Delay breaking apart
a phrase.*/
span[f]
{display:inline-block}
/*

# a fraction

Summary: Condense the width of a fraction. Classes: fraction; mixed-fraction.

Sample:

99/99
99/99

99 99/99
99 99/99

Markup:
99/99
<span class="fraction">99</span><span>/</span><span>99</span>
99 99/99
99 <span class="mixed-fraction">99</span><span>/</span><span>99</span>

A fraction consists of a numerator, a forward slash "/", and a denominator, each marked as a <span>. The <span> for the numerator is classed as fraction, and the other two are without a class.

A mixed fraction differs by having a number followed by a non-breaking space before the <span> for the numerator, with the numerator itself classed as mixed-fraction.

The numerator and denominator are styled pretty much the same as <sup> and <sub>. 

Mixed fractions
begin with a number
*/
.mixed-fraction
{margin-left:-0.25em}
/*
The numerator
*/
.fraction
,.mixed-fraction
{font-size:.8em
;vertical-align:baseline
;margin-right:-.1em
;position:relative
;bottom:.4em}
/*
The denominator
*/
.fraction+*+*
,.mixed-fraction+*+*
{font-size:.8em
;vertical-align:baseline
;position:relative
;bottom:-.2em}
/*

# references to Writings by Jean Charlot

Summary: Emphasize references to Writings by Jean Charlot: a bibliography. Classes: jmr-wjcb; non-alphanumeric. 

Potentially a list
of references
*/
.jmr-wjcb
{display:inline-block
;text-indent:0
;padding-right:.25em
;outline-style:solid
;outline-width:.0625em}
/*
Thumbnail of book cover
*/
.jmr-wjcb::before
{content:""
;background-image:
url("janine-richardson_a-e.png")
;background-size:100%
;display:inline-block
;vertical-align:top
;width:20px
;height:24px}
/*
References are typically
letter then number
*/
.jmr-wjcb
>a
{display:inline-block
;margin-left:.25em}

.jmr-wjcb
>a::first-letter
{letter-spacing:.1em}

.jmr-wjcb
>a.non-alphanumeric::first-letter
{letter-spacing:normal}
/*

# references to Jean Charlot Collection

Summary: Emphasize the references to the Jean Charlot Collection. Classes: with-jcc#; jcc#. 

A reference number
*/
.jcc\#
{font-size:.8em
;_line-height:1.7
;display:inline-block}

_.previews .jcc\#
{_position:absolute
;right:.875rem
;bottom:0
;_float:right
;display:block}
/*

Uncertain about the with-jcc# class... Leftover approach from before; formerly biblio class. Probably just treat the JCC number like a phrase when at the end of a paragraph. For now, no changes; waiting until revamp of Murals and Sculpture. 

Paragraph with a reference
*/
.with-jcc\#
{position:relative
;margin-bottom:2.1em
;white-space:pre-wrap}

h2+.with-jcc\#
/*¿where?*/
{margin-top:.7em}
/*
*/
.with-jcc\#>.jcc\#
{float:right
;margin:.5em 0 1em 1.25em}

/*Prevent intruding
on next paragraph.*/
.with-jcc\#+p
{clear:both}
/*

# image documents

Summary: A muted background color for documents with images. Full width of view for images wider than text width. Classes: imagery; image-then-credit (obsoleted).

An image document has either full size images for an item following its bibliographical description, or it has a list of preview images (240px by 240px max) and their descriptions. Either way, the <body> mark is classed as imagery.

The default light background is glaring and competitive with images. An brightly colored image can be glaring on a black background. A medium gray contrasts non-competitively, hopefully for comfortable viewing.

There is no standard "full size" for an image because quite often there is no larger size available. By default, an image wider than maximum text width can span fully unto the edge of the view.

The <img> mark is directly within the <body> region, thereby easily selected by CSS. Use a normal paragraph for the photo credit, when there is one, because sometimes the credit might be long. No centering; prefer visibility on left edge for when a document is in an overlapped view.

For an image document with full size images, a paragraph classed as image-then-credit has a full size image followed by an optional credit line. The credit line is on a newline beginning with <br> and followed by "photo: " and the name.

# rules for an image doc

<body> region
*/
.imagery
{display:inline-block
;max-width:none}
/*
An image in the doc
*/
body
>img
{max-width:100%
;height:auto
;margin-top:1.25em}
/*
obsolete*/
.image-then-credit
{max-width:none
;text-align:center}

.image-then-credit
img
{max-width:100%
;border-width:.125em
;margin:-.125em}
/*

# a list of previews

Summary: Horizontally listed previews, each as a sample linked to another document followed by an optional description, or just a description as a placeholder. Class: previews.

Previews are listed horizontally with their sample images vertically centered. The maximum space for the image is 240px square and exists for the first sample even when without an image, thereby the top edges of their descriptions align with each other. A single credit line fits in its dedicated space below the image, followed by optional paragraphs having the title or description.

A preview without a sample has "[no image]" in its place, and marked as a link when there is also a document, f.e. for a "[transcription]". On the other hand, a list of linked documents without sample images for them is done more simply as a series of descriptive paragraphs rather than this listing, optionally with named locations and their fragment links.

# a preview

Markup:
<ul class="previews">
<li>
<dl>
<dt>
<a id="item-id"></a><a href="#item-id" #>#</a>
<p><a href="item-id.html"><img src="item-id_part-1_240px.jpg" alt="Brief description for part 1."></a>
<p>photo: Someone Named
<dd>
<p>Biblio or description for piece.
<p>Description for part.
<dt>
<a id="item-id_verso"></a><a href="#item-id_verso" #>#</a>
<p><a href="item-id.html#verso"><img src="item-id_part-2_240px.jpg" alt="Brief description for part 2."></a>
<p>photo: Someone Named
<dd>
<p>Verso. Description for part.
</dl>
</ul>

A preview is a linked sample image to a document with a photo credit when available, followed by a description of the document. The linked document has a full size version of the linked sample image and information about the subject of that photo, or has a listing of more previews for many documents.

A list classed as previews lists each preview as a sample/description pair within a <dl> region, with the linked sample image and its credit in a <dt> always followed by a <dd> for the (optional) description for it. Additional pairs are listed in the same <dl> region, or a new one as part of a set, depending on the subject.

The <dt> optionally begins with a named location and its fragment link. Next is the paragraph with the linked sample to a document. An optional photo credit line is in a second paragraph beginning with "photo: ", and will automatically truncate its width to only one line of text.

# rules for a preview

A preview list has a neutral background color, regardless of whether the list is in an image document. 

The list
*/
.previews
{padding:0
;margin-bottom:1.25em
;margin-left:-.5em}
/*

Without these rules, a list item is normally prepended by a symbol (or number) aligned with its first line of text, and the bottom of an image aligns with the bottom of its line. That contrarily presents the top of the image foremost, delaying the list symbol until the bottom of an image. A line of text [or blank line, f.e. a <br>] before an image asserts normality of the list symbol seen first, therefore consider using the aforementioned (optional) fragment link aforemost the image paragraph for the same result.

The main focus is fitting a list item within the maximum column width allowed (20em) while abiding by .5em spacing on left and right sides of a document, therefore 19em. The right document edge is non-negotiable, but the left document edge is easily appropriated by a margin between list items. A scrollbar is usually less than 16px (1em) of space, which leaves at least 18em for a list item width. So far, 18.25em has been available. 

A list item
*/
.previews>li
{display:inline-block
;vertical-align:top
;border-left-style:solid
;border-left-width:.125em
;margin-top:1.25em
;margin-left:.5em}
/*
A preview 
*/
.previews
>*
>dl
{display:inline-block
;vertical-align:top
;width:17.25em
;padding-bottom:.5em
;border-left-style:solid
;border-left-width:.125em}
/*
Modify a fragment link
for a preview 
*/
.previews [\#]
{display:inline-block
;padding-right:.375em
;padding-left:.25em
;border-radius:0 0 75%
;margin:0}
/*

There is nothing similar to a gravity property for content within a region, therefore the line-height property is appropriated for asserting the vertical position of a sample image.

The line-height property distributes space equally above and below the text, t.i. vertically centered (because linespace-before and linespace-after are non-existent). For whatever reason, a linked image has a line of text (or blankness) behind it. That is revealed when an image is shorter than about half the line height [plus half the text height]. Consider obscuring that anomaly by individually styling it with "vertical-align:middle".

There is no attempt at aligning additional pairs of sample/description within the same <dl> with those of other list items, because the height of the description of the first pair will likely vary for each list item. 

Ensure space before image
when no fragment link
*/
.previews
>*>*
>dt
>p:first-child
{margin-top:1.375em}
/*
A sample
links to a document 
*/
.previews
>*>*
>dt
>p:first-of-type
{text-align:center
;max-height:240px}
/*
Assert vertical spacing
for image sample
of first subpreview 
*/
.previews
>*>*
>dt:first-child
>p:first-of-type
{line-height:240px}
/*
Linked sample image 
*/
.previews
>*>*>*>*>*
>img
{/*Counteract border*/
margin:-.125em}
/*
Tab-selection with TAB button.
(Because default is sometimes
indiscernible.) 
*/
.previews
>*>*>*>*
>:focus
>img
{outline-offset:.125em
;outline-style:double
;outline-width:.375em}
/*
A credit line fits in the space
between sample and description
*/
.previews
>*>*
>dt
>p
+p
{font-size:.8em
;white-space:pre
;text-align:center
;overflow:hidden
;margin-top:.375rem
;margin-bottom:-1.375rem}
/*
A description
for a linked document 
*/
.previews
>*>*
>dd
{/*Space between
sample and description.*/
margin-top:1.75em
;margin-left:.25em}
/*
Tighter spacing
between its paragraphs 
*/
.previews
>*>*
>dd
>*
+p
{margin-top:.625em}
/*
Divider between
additional samples
*/
.previews
>*>*
>dd
+dt::before
{content:""
;display:block
;width:3em
;border-style:dotted
;border-width:.25em 0 0}
/*

# a set of previews

Markup:
<li>
<a id="set-1"></a><a href="#set-1" #>#</a>
<p>Biblio or description for whole item. Two sheets.
<dl>
<dt>
<a id="item-id"></a><a href="#item-id" #>#</a>
<p><a href="item-id.html"><img src="item-id_240px.jpg" alt="Brief description for first piece."></a>
<p>photo: Someone Named
<dd>
<p>Sheet 1 of 2. Description for first piece.
</dl><!--
Preferably no space between ending and beginning marks of previews.
--><dl>
<dt>
<a id="another-item-id"></a><a href="#another-item-id" #>#</a>
<p><a href="another-item-id.html"><img src="item-id_240px.jpg" alt="Brief description for second piece."></a>
<p>photo: Someone Named
<dd>
<p>Sheet 2 of 2. Description for second piece.
</dl>

A document with a list of previews can be represented as a set of those previews within one list item beginning with an optional named location and its fragment link followed by an intro paragraph. Afterwards are the <dl> previews, preferably without any space between ending and beginning marks.

# rules for a set of previews

Intro paragraph for a set
*/
.previews
>*
>p
{max-width:35em
;margin-left:.25em}
/*
Boundary between previews
*/
.previews
>*
>p
~dl
{border-top-style:dotted
;border-top-width:.25em}

.previews
>*
>dl
+dl
{border-left-style:dotted
;border-left-width:.25em}
/*

# JCF documents

Some adjustments for the JCF documents.

Unfortunately, an <hr> mark rejects content from pseudo-regions, and of course the min-width property fails as a min-line-length substitute. Insert an empty <p> mark after the final illustration for the faux min-line-length feature of illustrations. 

A JCF document begins
with an illustration
*/
.jcf
>h1:first-child
+hr
+.illustration
{padding-top:0
;margin-top:0}

.jcf
>h1:first-child
+hr
+.illustration
+*::before
{/*An em-space character
for every em of
minimal width (13em).*/
content:"             "
;line-height:0
;display:block}
/*
A JCF document ends
with an illustration
*/
.jcf
>hr
~hr:last-of-type
{clear:none}

.jcf
>hr
~.illustration
+p
+hr:last-of-type
{margin-top:0}

.jcf
>hr
~hr:last-of-type
~p
{clear:both}
/*

# stylesheet documents

Some adjustments for fitting the rules for CSS stylesheets with this website stylesheet. 

A sample matches
its environment
*/
.sample>dd
{padding:.5em 0
;border-style:none solid
;border-width:.5em}
/*
*/
/*Hyperlinks
use bottom border.*/
.css
>code
>b
,.css-list code
>b
{line-height:1.375
;padding-bottom:.125em}
/*

# document views

Summary: All @media query rules for size/shape are kept here, except for the print medium.

Views are all shapes and sizes, and quite often resizable. Always have most minimal width in mind because the view of a document will be subjected to such resizing, and failure will unnecessarily disappoint.

Common width of paragraphs in books is about 12–18 words per line, or about 40em. Columnar text in magazines and newspapers is about 6–8 words per line, or about 20em, with about a 1em gutter in between columns.

However, any content is inherently readable in a text editor because that is how it is written, and an arbitrary view for reading inherently provides a readable view. Therefore, size/shape of an arbitrary view is never a concern because the view is inevitably as perfect as the written content.

Keep in mind that the person viewing a document has likely shaped the view, and maybe customized the view by means of a personal stylesheet, for personal comfort. Thereby, @media queries are best left for use by the person viewing the document, because that person is the one who knows and experiences the view.

# a partial view

Summary: Visual indicators for a pannable image when the system view management provides none (f.e. no scrollbar). Intended as compatible with existing visual indicators.

Sample:

Description of image.

Markup:
<hr
style="
max-width:312px
;height:171px
;border-style:solid dashed
;border-width:2px
;margin:0
;position:absolute
;right:0
;left:0
;pointer-events:none">
<p
style="
max-width:316px
;overflow:auto
;margin-top:0
"><img src="image.jpg"
style="
vertical-align:text-bottom
;width:312px
;height:171px
;border-style:solid
;border-width:2px
;margin:0"></p>
<p
style="
max-width:312px
;margin-top:0">
Description of image.

A partial view for a wide image is a region restrained by overflow with the image itself, overlayed by a dashed border (as an indicator) for the sides, t.i. three marks. The image has a solid border; the restrained region has no border; the dashed border is absolutely positioned over the restrained region. The dashed border indicates the image is pannable on that side, otherwise the dashed border is unnoticeable when it overlaps the solid image border.

Absolutely positioning a region by only the left or right properties keeps that region at its static position vertically, t.i. no vertical displacement. Thereby, the restrained region [with no top margin] immediately after such a positioned region will be perfectly aligned with it when both have the same width and height. Notably, the positioned region needs pointer-events set to "none" in order to scroll the image with the pointer, because positioning a region layers it above all other non-positioned regions.

Alternatively, a class could be used for most of the properties. While maximum width can be based on a common document width, the style attribute for the dashed border needs the image height because it tends to vary.

So far, all the properties are changed in the style attributes of the marks rather than any from this stylesheet. Though, that means it also works when a web browser fails to use the external stylesheet, as some do fail for one or the other of either "file://" or "http://".

The following documents have full-width decorative images. They might use a variation of this approach.

# pannable introductory image

Summary: An approach for a pannable introductory image fitting with the document title. Possible replacement for custom use of partial views. Class: pan-intro.

The pan-intro class is for the <body> mark. The document title is an <h1> mark followed by a horizontal rule <hr> mark. Immediately after is a paragraph with the image, and then a paragraph with the description for the image.

The horizontal rule <hr> after the document title is repurposed as the dashed border indicator. It needs a style attribute with the same height as the image.

The image is in a paragraph following the <hr> mark. The image can have its size declared in its width and height attributes.

A paragraph with a description for the image is expected after the paragraph with the image.

# rules for pannable introductory image

These rules presume the default document and paragraph maximum widths of 40em (640px). The dashed border (<hr>) needs the style attribute with the height property set to the image height.

The <body> is positioned as "relative" in order to prevent subpixel positioning anomalies of the dashed border indicator <hr>. Additionally, the dashed border indicator <hr> has a max-width property set to the image width for preventing subpixel calculation anomalies when magnifying the document view. 

Class for body region
when it begins with
an introductory image
*/
.pan-intro
{padding-top:1.625em
;position:relative}
/*
The indicator for
the partial view
*/
.pan-intro
>h1:first-child
+hr
{/*Default body is 40em = 640px.
Subtract border width for sides.*/
max-width:636px
;/*A dashed line
indicates more content.*/
border-style:solid dashed
;/*Same border width
as the image.*/
border-width:2px
;margin:0
;position:absolute
;right:0
;left:0
;pointer-events:none}
/*
Paragraph with image
*/
.pan-intro
>h1:first-child
+hr
+p
{white-space:normal
;overflow:auto
;margin:0}
/*
The wide image
*/
.pan-intro
>h1:first-child
+hr
+p
>img
{border-style:solid
;border-width:2px
;margin:0}
/*
Description of image
*/
.pan-intro
>h1:first-child
+hr
+p
+p
{text-align:right
;padding-bottom:.25em
;margin-top:0}
/*

# an aside

An aside is supportive content immediately available within the same view rather than hyperlinked for a separate view, f.e. a note or another document. For the same reasons for an illustration, an included document is about one full column width minus the spacing of the left side of the document (t.i. 18.75 em) and floated to the right. Similarly, it fits within the minimum width (20em) when the view is narrowed to a single column. In contrast, it appropriately uses an <iframe> mark for basic view management when referencing any document.

While it is a more general approach, there has been no need for it. The initial motivation was in the main index for previewing the most recently modified document listed in "Additions". There is an off chance of revising it as a replacement for the illustration class. However, the natural panning opportunities of an <iframe> would be contrary to the double-resolution support of the images by illustration (hence why <img> was used instead).

The document additions in a referenced document supplement the aside view by providing links that reduce the listing in the document to only the recently added items. The recent refinement of the previews class for listings (2020-09-23 of compatible changes) ensures a list item fits within that narrower view (reduced from 19.75em to about 18.25em).

No class as of yet, because of the variations and too few instances. Need several instances for a robust set of properties. Somewhat dissatisfied with the workarounds when amongst other floated regions, f.e. Additions.

# the print medium

*/
@media print
{
/*
*/
body
{padding:0
;border-style:none
;margin:0 auto}

/*Document title.*/
body
>h1:first-child
{font-size:1.5em
;padding:0}

p
{_page-break-inside:avoid}
/*
Hyperlinks
*/
/*No need for
a fragment link at
its location.*/
[\#]
{display:none!important}

a>img
{outline-style:none}

/*Interactions.*/
[tabindex]
{border-style:none}
/*
Index links
*/
body
>hr
~hr:last-of-type
~p
{position:static
;margin-top:1em
;margin-left:0}

body
>hr
~hr:last-of-type
~p>a
{white-space:pre-wrap
;padding:0}
/*
URL address for
main index
*/
body
>hr
~hr:last-of-type
~p
>a[rel*="start"]::after
{content:
"\a at https:"
"/"
"/jeancharlot.org"
"/index.html"
}
/*
URL address for
copyrights and credits
*/
body
>hr
~hr:last-of-type
~p
>a[rel*="copyright"]::after
{content:
"\a at https:"
"/"
"/jeancharlot.org"
"/contact.html"}
/*
Document additions
*/
[href="#most-recent"]
,[title="View all"]
{display:none}
/*
A sample for
a preview
*/
.previews>*>*
>dt
>p:first-of-type
{margin-top:1em}

.previews>*>*
>dt:first-child
>p:first-of-type
{line-height:1.75in}

.previews img
{width:auto
;max-width:1.75in
;height:auto
;max-height:1.75in}
/*
A preview
*/
/*Try to fit 3
previews per 8.5in
or 4 per 11in.
(Multiple print media
queries tend to fail.).*/
.previews>*
>dl
{width:
calc(
(9.5in / 4) -
(2 * .25in))
;margin-right:.25in
;margin-left:.25in}

/*Intro paragraph
for a set.*/
.previews>*
>p
{max-width:
calc(
(2 * (9.5in / 4)) -
(2 * .25in))}
/*
A list of previews
*/
.imagery>.previews
{margin:0}

.previews>li
{padding:0
;outline-offset:-.125em
;outline-style:solid
;outline-width:.125em
;margin:0
;page-break-inside:avoid}

.previews
>*::before
{content:normal}
/*
*/
}
/*
More in:
Website guideline
Stylesheet stylesheet
Personalize a stylesheet

Contact, copyright, credit
Jean Charlot & The Jean Charlot Foundation