The Jean Charlot Foundation (JCF) provides the jeancharlot.org website in furtherance of its mission as a 501(c)(3) non-profit organization, and as a service to its members, to those interested in the arts, and to the general public.
The following information is provided by the website technician, in hopes that it is helpful when viewing documents from this website.
Layout of this website and its documents. Index; images and PDFs; related links and sharing; offline; contact and copyright.
Visual differences of this website. Underlining of hyperlinks; borders rather than margins.
Customizing a personal stylesheet. Website stylesheet documentation; examples targeting this website with CSS; introduction to CSS stylesheets.
Printing. Limited attempt; alternatives.
Traditional navigation within HTML documents. Tabbing from link to link; scroll with the spacebar.
There is no dependence upon scripting nor programming, neither from within the documents nor from the webserver. Therefore, there is no reliance upon database software and their formats, neither on the webserver nor with the HTML viewer on the computer of the person requesting the documents. Notably, personal information is neither gathered nor required.
A document is intended as independent of its HTML, though with a little bit of fluff. The default properties of the HTML marks are acceptable, therefore a document remains independent of CSS. Thereby, a document stands on its own without the website stylesheet, visual differences are intended as informative, and traditional navigation within a document is enhanced.
Personal customization for viewing these HTML documents is possible by means of a personal stylesheet, as well as optionally matching the domain name within the id attribute of the <html> mark. Basic details about using common keyboard navigation of a document are also provided.
The main index has every category, making it both the table of contents and concise sitemap.
The index document for each category is intended to have descriptions for and links to every document in that category. Therefore, the "Find" command of any HTML viewer aids in locating the relevant links within the index document for a category, without connecting to a webserver for each and every query. Nothing hidden, everything up front, and hopefully much less guessing.
Many resources are scans of photographs as JPG or TIFF, or of documents as PDFs of JPGs or rarely of TIFFs. Notably, the PDF documents likely have large file sizes. A lack of page numbers can be supplemented by the page count of a PDF viewer program. Most of the time the only text available on the website for a scanned item is its brief description in a listing.
When sharing links to a PDF or to an image on this website, it is more reliable to link to the HTML document that lists or describes it rather than directly to the PDF file or image file itself. That also will help prevent the surprise of downloading any of these very large files. Consider providing the title or description of the PDF or image when sharing a link to its HTML document.
Many of these HTML documents have a set of links to related documents at the bottom. For example, a published article might refer to a mural, or a mural might be discussed in correspondence. That is casually updated as relations are noticed and as time permits.
Documents from this website are intended as perusable without its latest website stylesheet. That enables the complete absence of the website stylesheet without penalty, such as when a document is saved offline. That also eases reading the documents without an HTML viewer, and eases copy/paste of the minimally marked text from these documents into personal notes that are helpfully marked with HTML, too.
Most every HTML document has a title affixed to the top, but that can be readily changed with a personal stylesheet. The very bottom has a link back to the main index, and a link to the document with the contact/copyright info for the Jean Charlot Foundation and website. Copyright permissions are always respectfully sought prior to posting on this website or publishing. Please abide similarly, especially when in doubt, as overall it is obviously a part of verifying sources.
There are a couple of notable visual differences declared for documents from this website when compared with traditional characteristics of HTML marks. Anybody personalizing a CSS stylesheet for viewing this website should know the line under a hyperlink is actually a border, and the spacing along the left and right edges of these documents are actually borders.
Additionally, different shaped lines under a link indicate whether the link leads to another document or within the same document.
Traditionally, hyperlinks are underlined because visiual distinction by means of a symbol is more reliable than contrasting more than two colors. The underlining has been thin, has been overlapping the descenders of letters in a word, and has been uncustomizable for over two decades.
The underlining for hyperlinks on this website has been removed and a bottom border has been added. This allows for a thicker line that is usually beyond the descenders of the letters of words, too.
A solid bottom border resembles the same traditional underline, and means the hyperlink leads to some other document or website. For example, this link to this website.
A dashed bottom border means the hyperlink is to a location within the same document. For example, this link to this section in this document about the underlining of hyperlinks.
A dotted bottom border means the text has a note [like this one], which might also be in a note list. The note is viewable immediately after the underlined text by focusing on the underlined text, f.e. by tabbing or with a pointer.
The space around the content of documents is minimized rather than fluffy. This enables efficiently shaped views generally without horizontal scrollbars or overflow, regardless of the size of a computer display, gadget, or sheet of paper.
Narrow borders are used for spacing on the left and right edges of a document, because margins and padding are uncolorable.
Ultimately, the person viewing an HTML document makes the final decision of how to view it by means of a personal stylesheet.
Before the turn of the century, personalizing was enabled with Simplicity, Flexibility, and Accessibility by the means of a personal Cascading Style Sheet (CSS) document. Ever since then, the everyday person has been personalizing the view of any HTML document requested (misnomered as "visited") from the World Wide Web.
That is because a person might have different comforts, abilities, or desires throughout the day, and an author of a document can never anticipate all possibilities for a single stranger, yet alone for everyone. Truly, it is the responsibility of the person viewing the document to make adjustments for personal comfort, as that person is in the best position to know the personal discomforts of that moment in that environment.
Curiously, using a personal stylesheet is considered by computer companies as "challenging". For example, one microcomputer software company has labeled it as an "accessibility" option within its HTML viewer program, while another non-personal computer company has labeled it as "advanced". Other computer programmers require the person reads the computer source code of their HTML viewer programs in order to discover how to activate a personal stylesheet, if possible at all.
Nonetheless, the content of these documents are intended to be independent from the website stylesheet. In that way, the <link> mark declaring the stylesheet can be removed and the document should still be comfortably readable. Or change the path in the <link> mark to a custom stylesheet, or add more stylesheets. Note that is different than using a personal stylesheet in regard to overruling rules, as they become stylesheets of the document itself.
The website stylesheet is documented with intent and use. There is also a means for specifying CSS rules for only this website so they can coexist with the CSS rules intended for other websites within the same personal stylesheet.
The visual characteristics that have been changed and the intent for changing them have been consolidated into a single stylesheet for this website for its most recent documents.
Sometimes a document has changes that are specific to only the document itself. The guidance and CSS rules will be either in the <style> region at the top of the document, or at the very bottom within an <iframe> region as an internal document.
There are very few classes for selectors of CSS rules within the website stylesheet. On this website, the id attribute is always intended for use as a fragment link, though sometimes the location is also enhanced. Overall, that should simplify specificity for selectors of CSS rules.
Even though a personal stylesheet usually affects the visual characteristics of documents from all websites, it is possible to affect documents from only one website without creating multiple personal stylesheets. Alternatively, the HTML documents from this website can be just as easily excluded with the :not() CSS selector.
The id attribute for the <html> mark in documents from this website is declared for convenient use within personal stylesheets. It has the domain name of this website "/jeancharlot.org/", the path to the document, and then the document name without the superfluous ".html" suffix.
<html lang="en"
id="/jeancharlot.org/writings-on-jc/index">
Note that it is within the document, therefore CSS rules matching it will work regardless of wherever the document is saved or renamed.
Match just the domain name in order to affect all documents from this website.
Recall ^= in an attribute selector for a CSS rule matches only the beginning of the attribute value, without needing to match the whole attribute value.
/* Unstick the document title
from the top. */
[id^="/jeancharlot.org/"]
>body
>h1:first-child
{position: static !important}
/* Replace the border around documents
with wide margins instead. */
[id^="/jeancharlot.org/"]
>body
{border-style:none !important
;margin-left:1em !important
;margin-right:1em !important}
/* Increase the line height of paragraphs. */
[id^="/jeancharlot.org/"]
>body
>p
{line-height:1.5}
Include a directory name for matching documents in that directory (and its subdirectories).
/* Count the number of entries
within any document of the section
"Writings on Jean Charlot".
("count-of-entries" is a made up name,
so rename it if desired.) */
[id^="/jeancharlot.org/writings-on-jc/"]
>body
{counter-reset:count-of-entries}
/* Each paragraph or <dl>
is probably an entry. */
[id^="/jeancharlot.org/writings-on-jc/"]
>body
>p
,[id^="/jeancharlot.org/writings-on-jc/"]
>body
>dl
{counter-increment:count-of-entries}
/* Might as well use the ::before pseudo-region
from the last horizontal rule <hr>
(which is after all the content)
for showing the results in the top right corner
below the document title. */
[id^="/jeancharlot.org/writings-on-jc/"]
>body
>hr:last-of-type::before
{background-color:black
;color:white
;content:counter(count-of-entries) " entries"
;position:fixed
;top:1.5em
;right:0}
Match the whole value to match a specific document.
/* For the main index of "Writings on Jean Charlot"
assume each data-added region is an entry
and stack all of them into two columns. */
/* The 1st, 3rd, 5th,... */
[id="/jeancharlot.org/writings-on-jc/index"]
>body
>[data-added]:nth-child(2n+1)
{float:left
;clear:left
;width:19.5em
;padding:1em .5em 1em 0
;border-top:#999 solid .125em
;border-right:#999 solid .5em
;margin:0 -.25em 0 0 !important}
/* The 2nd, 4th, 6th,... */
[id="/jeancharlot.org/writings-on-jc/index"]
>body
>[data-added]:nth-child(2n)
{float:right
;clear:right
;width:19.5em
;padding:1em 0
;border-top:#999 solid .125em
;border-left:#999 solid .5em
;margin:0 0 0 -.25em !important}
/* Keep the relational links at the bottom
by clearing the line breaks before them. */
br
{clear:both}
/* Complete the look by making the
left and right edges the same color. */
[id="/jeancharlot.org/writings-on-jc/index"]
>body
{border-color:#999 !important}
/* For the "Murals and Sculpture" locations listing
use the ::before pseudo-region of the <html> region
for personal notes. */
[id="/jeancharlot.org/murals-sculpture/locations"]::before
{background-color:black
;color:beige
;content:"Favorite murals: ..."
;width:10em
;position:fixed
;top:1.5em
;left:0}
Using $= for matching only the ending of the attribute value makes it possible to match by both the domain and the document name regardless of intermediary directories.
/* A dotted left border for documents,
except for indices. */
[id^="/jeancharlot.org/"]
>body
{border-left-style:dotted !important}
[id^="/jeancharlot.org/"][id$="/index"]
>body
{border-left-style:solid !important}
Use the :not() selector for excluding some or all documents from this website from being affected by a specific rule.
/* A rule for all websites
other than jeancharlot.org. */
:not([id^="/jeancharlot.org/"])
>body
>p
{
/* whatever properties desired
for paragraphs in the body region */
}
A personal stylesheet gives a person the opportunity to establish a more comfortable personal experience. A capable HTML viewer (computer program) will apply a personal stylesheet to each HTML document viewed within it.
CSS is used for changing the default characteristics of marked regions in an HTML document, f.e. background color of text marked as a paragraph <p>. A basic stylesheet might be named "personal-styles.css", and might be as simple as a single rule and no other text.
p
{background-color: white !important}
Simply use a text editing program to create a plain text file. Typically, a plain text file is saved with a filename having the ".txt" suffix. For a personal stylesheet, it might help to add ".css" to the filename rather than ".txt" for the sake of some HTML viewer programs.
Any text embraced between /* and */ within a CSS stylesheet is personal commentary, a convenience for recording motivation and intent. Commentary will be ignored by the HTML viewer program because it only uses the CSS rules.
There are only three sources of CSS: the HTML viewer stylesheet, a personal stylesheet (often misnomered as "user"), and the document (misnomered as "author").
An HTML viewer provides from its own stylesheet its default values of properties for each HTML mark. For example, a common HTML viewer default is a white background color with a black text color for the body region.
body
{background-color: white
;color: black
;margin: 1.5in}
For a specific mark, a property for it in a personal stylesheet overrules the same property for it in a HTML viewer stylesheet. For example, a similar rule for the same <body> mark declared in a personal stylesheet, but with properties of different colors.
body
{background-color: black
;color: beige}
For a specific mark, a property for it in any CSS rule of the document overrules the same property for it in either a personal stylesheet or HTML viewer stylesheet. For example, a similar rule might be in a style region [marked as <style> ] of the document or in a separate stylesheet [a file referenced by a <link> mark].
body
{background-color: white
;color: gray}
The only way for a personal stylesheet to overrule a property value from CSS rules of a document is to add "!important" [space around the exclamation mark ! is optional] to the value. For example, declare each value of the color properties for the <body> mark to be important.
body
{background-color: black !important
;color: beige !important}
As such, what really matters is whether the value of a property for a specific mark declared in a personal stylesheet is more important than what the document declares for it. While the document can also use "!important", its use in a personal stylesheet will overrule its use in the CSS rules of the document. To reiterate, the person viewing the document makes the final decision by means of the personal stylesheet.
While printing has been considered generally for these documents, further adjustments with CSS might be desirable. The basic approach is black on white, and scaled images.
In general, there has been very little development of printing options by means of CSS within HTML viewers, even though computer programmers figured out how with other types of programs before the turn of the century. Despite this, HTML viewers often offer additional print options by other means. Keep in mind, different HTML viewers offer different print options.
With the recent disappearance of scrollbars in document views of many computer programs, it is worthwhile knowing about commonly available means for scrolling a document by the press of a button on the keyboard.
Decades ago, the TAB button on a keyboard would emphasize the next hyperlink in a document, holding SHIFT while typing TAB would emphasize the prior hyperlink, and the RETURN or ENTER buttons would reveal the document addressed by the hyperlink. Some HTML viewer programs would thoughtfully enable the TAB button to focus on the first link in the current view of the document rather than at the beginning of the document.
That was helpful for when using a pointer on the screen was too much effort or coordination, such as when eating in front of the computer. While it is also considered as an "accessibility" aid, it has become common in many other programs besides HTML viewers. Thereby, variations for what the TAB button will focus upon might be in the keyboard settings rather than accessibility settings. As such, everyone can traverse a document link by link and visit the next desired document without sliding and lifting clunky devices, nor smudging the viewer screen.
The item emphasized, or focused, is also considered as the targeted location within the document view. For example, fragment links for sections are provided with the octothorp "#" symbol at the heading of a section. Activating its link will move that heading to the top of the view, whether by keyboard or pointer. Similarly, pressing the button on the pointer device arbitrarily within the document might set the targeted location at the pointer. Either way, that becomes the targeted location of the document, and from where the TAB button focuses the next or prior link.
As the means are coexisting, it might sometimes be convenient to select a fragment link (f.e. the "#" links) with the pointer and then use the TAB button to move on from that location in the document link by link, followed by the RETURN or ENTER buttons whenever a link is worth its jump.
As aforementioned about hyperlinks in documents of this website, text with a dotted underline has a note [such as this one] immediately viewable when it has the focus, rather than having to reference a listing of notes. Such text is focusable either by using the TAB button or by moving the pointer over it. Pressing the button on the pointer retains the focus so the pointer can be moved out of the way.
Another way of scrolling a document is by typing the spacebar for revealing the next viewful of the document (like the Page Down button), and by holding SHIFT while typing the spacebar for revealing the prior viewful (like the Page Up button). This, too, has remained as an option in HTML viewers and many other programs.
Contact, copyright, credit
Jean Charlot
&
The
Jean Charlot Foundation