CSS font stacks, media style sheets & web standards
This page is part of a searchable archive of the Code Style site log. Technical implementation notes that shed light on when, why and how the site has evolved since 2000.
Follow the latest entries to the site log.
Further development and testing of outstanding CSS2 media test pages. Changed projection media test stylesheets to right align headings instead of making them larger, to more clearly test projection media compatibility in print mode. Changed all references to "bigger" headings to right aligned headings in test pages, including minor grammatical changes to Projection media browser support.
Actions: Ask a question about this post, seek clarification or offer a correction.
Generated a full set of further CSS2 media stylesheet test pages from the present print media test suite including link navigation and menu include files for: all, aural, braille, embossed, handheld, screen, tv and tty media. Created a new test results table format for the compatibility charts to accommodate an extensible vertical list of browser versions. Now testing with WebTV viewer too.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added Dublin Core issued data to all published files:
<meta
name="DC.Date.Issued"
scheme="ISO8061"
content="2001-03-04" />
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed the addition of Dublin Core meta data, including created and last modified dates. Note many modified dates currently indicate changes to general document markup rather than the content; subsequent edit cycles will bring this in line over time. Re-arranged some as yet unpublished sections of the site, including subsections of the Javascript DOM area and HTML applet and object subsections.
| Month | 2000 | 2001 |
|---|---|---|
| January | 0 | 15 |
| February | 0 | 6 |
| March | 1 | 14 |
| April | 3 | 8 |
| May | 8 | 8 |
| June | 8 | |
| July | 5 | |
| August | 4 | |
| September | 0 | |
| October | 6 | |
| November | 6 | |
| December | 14 | |
| Total | 55 | 51 |
Actions: Ask a question about this post, seek clarification or offer a correction.
Started applying Dublin Core meta elements, primarily for recording permanent created dates for files and last manually modified dates for articles, to establish a review and editing schedule for all content, e.g.:
<meta
name="DC.Title"
content="Code Style site log and archive" />
<meta
name="DC.Date.Created"
scheme="ISO8061"
content="2001-03-04" />
<meta
name="DC.Date.Modified"
scheme="ISO8061"
content="2001-05-15" />
<meta
name="DC.Identifier"
scheme="URI"
content="http://www.codestyle.org/codestyle/log/index.shtml"/>
Also introduced some generic Dublin Core meta elements which are included in all pages. Worked back to files last modified on April 28 2001 so far, to be uploaded ad hoc.
Actions: Ask a question about this post, seek clarification or offer a correction.
Corrected an internal server error, 500, in version 1.1 of the FontSampler servlet for requests with no HTTP Referer header passed, typically spiders and link checkers. Amended the Back navigation sections where the oversight occurred with a conditional check for null and updated as version 1.2. Also corrected CSS checker links in footer include files.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed development of version 1.1 of the FontSampler servlet to display images of selected fonts for the Windows font sampler in particular. Quoting from the newly introduced Javadoc comments, this version also includes meta keywords, a back link to the referring page and a version and copyright footer. The new dual purpose required a number of changes to the Sampler.css stylesheet for the article set, mainly to position the object and img elements on the page:
BODY.FontSampler{
color: #000;
background: url(/images/CodeStyleFeintCrop.gif)
no-repeat
#FFF;
}
#SampleContent{
margin: 4% 7.2%;
}
#SampleContent P,
#SampleContent H1,
#SampleContent H2,
#SampleContent H3{
margin-left: 3%;
margin-right: 3%;
padding-left: 3%;
padding-right: 3%;
}
#SampleContent OBJECT,
#SampleContent IMG{
border: solid thin #039;
margin-left: auto;
margin-right: auto;
}
.SampleTable{
margin-left: 12%;
}
.VersionCopyright{
font-size: small;
}
Changed the Windows, Mac and Unix font samplers to use the standard wide stylesheet, and added floating down-page site navigation links near the top of the page:
.WideNav{
display: block;
float: left;
width: 12%;
text-align: center;
font-family: sans-serif;
padding: 1%;
}
Changed the sidebar markup to include the necessary fragment identifier, sitenav. The Netscape 4 stylesheet has a minimal version, without a float property, which puts this link under the page heading:
.WideNav{
text-align: right;
font-family: sans-serif;
}
Corrected a markup error in the font sampler menu list and made the included introductory text more succinct and introduced a new set of meta keywords to this subsection.
Actions: Ask a question about this post, seek clarification or offer a correction.
Started writing up a glossary page for the Code Style font sampler subsection.
Actions: Ask a question about this post, seek clarification or offer a correction.
Started drafting a serif font sampler overview, but ultimately spent more time writing up a glossary for the CSS font-family section. Also extended the ServletUtilities class to include standard CSS link elements, a standard sidebar menu, and other standard markup structures.
Actions: Ask a question about this post, seek clarification or offer a correction.
Produced a series of GIF images to accompany the Windows font sampler.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed Code Style font sampler subsection with separate listings and user surveys for Windows, Mac and Unix systems. The set uses a first version of a new FontSampler servlet, which expects two query parameters: class and font, the CSS class and URL-escaped name for the font respectively, e.g. Times New Roman or Times.
The FontSampler servlet calls on a new utility class in the same org.codestyle package: ServletUtilities.
Changed markup in the form handler script output to match the standard site structures in XHTML strict to make use of the built-in field confirmation features and enhance the formatting of error messages. The form handler references the CSWide.css stylesheet, which imports CSWideImport.css in turn. Added a rule for a new .Feedback class selector to give the form results table the same left margin as other elements:
/*
Adjust left and right margins
*/
#Content P,
H1,
H2,
H3,
H4,
H5,
DL,
.Box,
.Feedback{
margin-right: 18.5%;
margin-left: 15%;
}
Actions: Ask a question about this post, seek clarification or offer a correction.
Find technical implementation notes on all aspects of the Code Style site.
For a summary overview, see the annotated site log contents.
