CSS font stacks, developer FAQs & 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.
Optimised the text ad service pages with page-specific keywords based on top entrance keywords over the past 6 months and Yahoo! sponsored search impressions. Also applied the same page-specific keyword approach to Windows font survey results by creating "NoKeywords" versions of standard head include files for the sections and putting the keywords in the documents themselves.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added 14 new FAQ answers across multiple Java categories, including 2 in the Javascript browser FAQ and 3 in the Web fonts FAQ.
Actions: Ask a question about this post, seek clarification or offer a correction.
Further catch-up for site log entries for August 2008 and archived those for June 2008.
Actions: Ask a question about this post, seek clarification or offer a correction.
Rather belatedly added site log entries for July 2008 and archived those for May 2008 using Subversion commit messages and diffs to prompt.
Actions: Ask a question about this post, seek clarification or offer a correction.
Applied user feedback to the FontStack servlet. Added a doPost() method to handle 3 separate select inputs for Windows, Mac and Linux fonts. Font selections are appended to the current stack list then a sendRedirect() is issued to display the new font stack builder using the doGet() method. Set the width of the 3 font family select elements to 60% so they will lay out vertically with the submit button alongside the final one.
form.GenericFontFamily select {
width: 60%;
}
form.FontFamily select {
width: 60%;
margin-top: 0.2em;
}
Extracted a range of String constants for common FontStack markup to substitute for literal text.
Updated the Presentable interface and ErrorTemplate implementation to take the new getHeader(String, String) method signature in CodeStyleTemplate. Added the current font stack list to the font stack builder servlet title element. Added 2 more tips to the "Stack tips" boxout and set important words in strong markup. Added a new sub-heading to cover the explanation "What are the generic font family figures?" with fragment anchor and added a "What's this?" link to it from the font stack table. The link text has an abbreviated explanation as a title attribute.
Created call to action include files for Validate your markup with NSGMLS and JTidy development notes articles for use in other areas of the site.
Actions: Ask a question about this post, seek clarification or offer a correction.
Added new calls to action for the Golden rules for Javascript and DOM1 visibility drop down menu system articles and added MenuBox div to the next/previous navigation. Added some AJAX toolkit links to Anchor Points: Javascript & DOM page. Corrected bad links in HTML & XHTML and CSS style guide sections.
Created call to action include files for JTidy development notes article and added this to the HTML & XHTML section index. Added new Anchor Points: HTML & XHTML and Anchor Points: Java & servlets listings, with NewSection class selectors on their h2 headings. Also divided the Anchor Points: Fonts and foundries listing into sections for each foundry.
Added new versions of the getHeader() method to the CodeStyleTemplate class with a separate argument for the page heading, so it may be different from the document title element. Adapted the existing methods to pass the title argument as the heading to maintain original behaviour. Also corrected the Java section link text in the sidebar menu to Java & servlets.
Actions: Ask a question about this post, seek clarification or offer a correction.
Made various refinements to improve the logical order of the font stack builder servlet class HTML interface and supporting information. Added inline font-family style rules to the font selector option elements and font stack table cells to show font names in their own font style. The font-family rules on option elements are only applied in Firefox and Google Chrome, of those tested. Refactored the class to create several helper methods:
appendStackTipsBoxout(StringBuffer, List, HttpServletRequest)
appendFontSelectors(StringBuffer, HttpServletRequest, List, String, String);
appendFontStackLink(StringBuffer, HttpServletRequest, List, String, String);
appendFontStackTable(StringBuffer, List, HttpServletRequest, String, String);
appendFontSelectors(StringBuffer, HttpServletRequest, List, String, String);
appendDeclarationLink(StringBuffer);
appendFontSample(StringBuffer, HttpServletRequest, List, String, String);
appendFootnote(StringBuffer);
Added an array of CSS font-size keywords to support size adjustments to the font stack builder text sample. Font sizes are checked through a private isValidFontSize(String) method to prevent code injection. The cleaned font stack List is passed to getStyleAttribute(List, String) to style the font sample and generate the font-family declaration to copy and paste.
Added a font-size request parameter that is passed to all key methods to maintain the selected font size through all operations. Switched logic to use the static FontFamily.isGenericFontFamily(String) method in all cases. Updated the FontFamily constructor to pass literal generic font family names rather than int keys.
Actions: Ask a question about this post, seek clarification or offer a correction.
Completed styling of Font stack builder, with new class attributes for the generic font family and font family selector form layouts in CSStdLayoutCommon.css:
#Content .MenuBox form.GenericFontFamily {
margin-top: 0.3em;
margin-bottom: 1.1em;
}
#Content .MenuBox form.FontFamily {
margin-top: 0.3em;
margin-bottom: 0em;
}
.FontStack caption {
margin-top: 0;
padding-top: 0;
}
Also added styles to the livery style sheet, CSStdLiveryCommon.css, for a new Footnote class, optgroup and nested option elements. A child selector on the optgroup rule is used to exclude IE6, which doesn't handle it correctly:
.MailingList th, .MailingList td,
p.Information, .Footnote {
font-size: small;
}
.FontStack caption {
color: #999;
background: transparent;
}
input[type=text],
input[type=radio],
input[type=checkbox],
select, option, textarea,
optgroup option {
color: #000;
background: #EEF;
}
/* Child selector to hide from IE6 */
select > optgroup {
background: #039;
color: #FFF;
font-style: normal;
}
Added a link to the Nuvola icon theme terms from the site copyright, terms and conditions with copy of the GPL licence, readme and copyright disclaimer.
Actions: Ask a question about this post, seek clarification or offer a correction.
Re-structured the output of the font stack builder servlet class to customise the output based on the state of the font stack; whether a generic font family has been selected and how many fonts have been added. Also adjusted the markup structure to bring more attention to the main font stack table area. Added notes on the source of the probability data and a clearer explanation of the probability figures.
Updated the FontFamily constructor and relevant methods to work with a literal String for generic font family names and added a font class argument for compatibility with the font sampler system. Retained the good citizen constructor that includes font frequency parameters for Windows, Mac and Linux, but added setter methods for each so the values can be configured post-instantiation. Also added a getCSSClassName() method and adopted the isGenericFontFamily(String) method from the FontStack servlet.
Latest: Build a better CSS font stack with our font survey results:
Actions: Ask a question about this post, seek clarification or offer a correction.
Introduced a new ad service "pointers" area to the top of the text ad service and sponsored link service pages to direct customers to the appropriate pages. The "You are here" marker floats to the left and the "Pointer" link floats right within the central body area of the page.
.AdServicePointers {
float: left;
clear: none;
width: 69%;
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
}
.YouAreHere {
float: left;
clear: none;
width: 188px;
height: 133px;
}
.Pointer {
float: right;
clear: none;
width: 188px;
height: 87px;
}
Added NewSection class attributes to the h2 headings on the site stats page to improve the division of content. Corrected a text ad FAQ where the question had been inserted in place of the answer!
Actions: Ask a question about this post, seek clarification or offer a correction.
Made multiple enhancements to the prototype font stack builder servlet class to make a private release for user feedback. The servlet can be used to dynamically build a CSS font stack with font survey results data to show the probability of each font being displayed on Windows, Mac and Linux systems.
Hashtable to SortedMap type TreeMap storage to list font families alphabetically.
strong markup to non-zero probability figures to emphasise.
select element.
Extracted the code in FontSurveyTemplate for formatting font family names and made it a method of its inner class FontFamily: public final String getFontFamilyProperty(). Adopted the same method for the recently added org.codestyle.sampler.FontFamily class, with Compare interface methods with a view to supersede the inner class.
Added a top and bottom border style to the Generic font family table row and created a new style to underline the table heading row.
.Generic td {
background: #EEF;
color: #333;
border-top: solid 1px #ccc;
border-bottom: double 3px #ccc;
}
.HeaderBase th {
border-bottom: solid 1px #ccc;
}
Set the font stack builder probability and controls table cells to align right:
.SizeData, .Probability, .Controls {
text-align: right;
}
And adjusted the size of the up/down and remove buttons:
.UpDownButton {
width: 20px;
height: 18px;
clear: left;
float: left;
}
.RemoveButton {
width: 18px;
height: 18px;
clear: none;
float: left;
}
Added the Add This link share markup to the CodeStyleTemplate class.
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.
