but don't!
Let your jazzed-up formatting be driven by your needs. The cheat sheet and to some extent
this tutorial contain far too many fancy things for the average document.
3.1.4Start at the top
Base font
Normally, for consistent look-and-feel you would edit the CSS to set the default font.
Alternatively, for a once-off you could adapt the following to suit in a
STYLE block.
body{font-family:Serif;}
The way I start my documents is as follows:
| div class=topMenu |
This is fixed to the top of the viewing screen and is used for A links for navigating a library of documents. |
| div class=title1 |
Global context |
| div class=title2 |
Specific purpose of document |
After that anything can happen.
3.1.5Frequently used styles
- Of course H1, H2 and H3
Note that H1 and H2 will force their way onto
a 'new line' but you may need to add clear to H3 if you've got floating bits before it.
Start the heading text with something underlined to have it
appear as a section number in the left margin. Or use class=autonum for automatic numbering.
- div class=boxOut with various combinations of left, right, w4 and w5
is a really handy way to encapsulate a nugget. It is just a DIV
with fancy formatting.
The w styles are used all the time.
Single digits are fractions, double digits percentages.
wall is variable up to 100% - often used to override the default 25% width of boxOut
|
- TABLE without any class sets up a grid without lines. This is handy
for when you want to split the width in a definite way. It is often much easier to force the layout
that you want with a table rather than relying on floats. TD class=w4 say
will try to restrict the width of a particular column to 25%. It's not ideal but often works.
- UL class=bare is a convenient way to structure vertical space.
Adding a w-class can be handy to stop it sprawling right across the page.
- UL class=ticks is great for ticks, crosses and boxes.
|
3.2The joy of box
Have a look at the H6 section of the cheat sheet. There are two important points to notice
- The complete styling is done in one go. This means you can allocate certain boxes for
particular purposes. In my world helpful hints and tips are always
green. This leads the way to quick, consistent formatting and faster comprehension by the
reader. You can of course tweak these styles and even add pictorial icons if you want
but always put directness of communication before cuteness of candy.
- The layout is a not tabular. In fact these boxes float. For example the
black box has floated left until it bumps up agsinst the blue box. As well as left
and right you can use center or centre.
Floating minefield
Whilst you can do really useful things with div class=boxOut
and H6 they upset the normal flow of the main content.
Sometimes it goes horribly wrong. Tables are simpler if suitable.
factfact w5 left
20% width. Float towards the left. (Bumps up against left margin)
infoinfo w5 left m1
20% width. Float towards the left. Leave a 1em left margin. (Bumps up against fact)
hinthint w4 left m1
25% width. Float towards the left. Leave a 1em left margin. (Bumps up against info)
warnwarn w4 left down
25% width. Float towards the left. (Bumps up against left margin).
Without the down the box would try to snuggle up with the row of boxes above.
dontdont w2 right m1 shadow
50% width. Float towards the right. Leave a 1em left margin. (Bumps up against right margin)
factfact w5 left
20% width. Float towards the left. (Bumps up against left margin)
infoinfo w5 left m1
20% width. Float towards the left. Leave a 1em left margin. (Bumps up against fact)
hinthint w4 left m1
25% width. Float towards the left. Leave a 1em left margin. (Bumps up against info)
warnwarn w4 left down
25% width. Float towards the left. (Bumps up against left margin).
Without the down the box would try to snuggle up with the row of boxes above.
dontdont w2 right m1 shadow
50% width. Float towards the right. Leave a 1em left margin. (Bumps up against right margin)
The source code for these examples is exactly the same. The H6s just follow on one after another.
<h6 ... fact left"> ... </h6>
<h6 ... info left"> ...</h6>
<h6 ... hint left"> ... </h6>
<h6 ... warn left down"> ... </h6>
<h6 ... dont right"> ... </h6>
Note that the grey frames are round DIVS. These needed the floatFix style adding.
(The reason is that the floated elements, in this case all the boxes, have been taken out of the flow and
the browser doesn't count them as taking up vertical space.)
Get out of float troubleYou may find that a floating box interferes in an unpleasant way
with what comes next. There are two things to try:
1 Put a DIV class=floatFix
around the offending box and its host section.
2 Add left and down to the following item.
3.3Tables for layout and presentation
3.3.1Good reasons for splitting page into columns
Alternative method
See section 3.7 Newspaper columns for a less reliable
(uncertain browser support) but smoother way of flowing text between multiple
columns.
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
A framework is just a lot of CSS rules and a bit of documentation.
Obviously it is useful to be able to style basic elements such as
H1 and anyone who has written user guides will
have developed bits of style such as
DIV.alert{border:3 solid red;} etc.
This gives
styling speed and consistency.
What I've done here is tidy up my standard framework and documented it
so you can re-use what I re-use.
Remember you can easily adapt it to suit your preferences.
| User benefits |
Author benfits |
- Consistent use of elements for ease of interpretation
- Easy formatting means better, easier to read layout
- Rich formatting can give direction and clarity
|
- All your documents have a standard look and feel
- Simplification of formatting and features
- Easy formatting means better layout, clearer documents
- Quick picking of complex styles
- Make your point quickly with ready to use features
|
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
|
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
|
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
No flowUnfortunatly there is no reliable
automatic way to flow text between columns. In practice I find this a bit of a bore but it helps to leave
putting the text into columns until it has been pretty much finalised. See section 3.7 for
alternative method which may be suitable for your needs.
Column widthsUnfortunatly tables have a habit of deciding the
width of their columns themselves is based on the amount of text in them
and trying to get images to fit and looking at some unfortunate animal's entrails.
You can see the adjustment happening above. You can
suggest to the browser some widths by adding a w4 etc. to
all the TDs of a row. It works for me in this case.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
|
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
|
There are two different reasons for using tables. Firstly to organise the layout and
secondly to display tabular data. If I had a long narrative report then I'd probably
put it into two columns as shorter lines are easier to read. The great advantage of
tables for controlling layout over floats is that you force rows and columns to align
|
regardless. If you look at the source code of section 1.2
you'll see that this is a nest of two tables. Lets see what it would look like without
the outer table. I think the narrower columns make it a lot easier to read.
These two columns have full added to the TD for
fully justified text.
|
3.3.2Coding tables for layout
You need to know the basics of HTML tables.
Simply a TABLE contains a number of rows
(TR) which in turn contain a number
of cells (TD). Always TDs inside TRs.
Put whatever you like inside the TDs.
The cheat sheet tells you all you need to know about informal tables used
to organise layout. There's nothing much to it really. Don't forget you can
easily make your table smaller by adding a width class to it. Formatting
styles applied to the TABLE often cascade down to every cell.
3.3.3Coding tables for tabular data display
Once again the cheat sheet should tell you all you need to know. The key thing is
the table class. That will get you started.
Internet ExplorerVersions less than 9 can't format columns in one go. You have to style each TD!
Adding class table to TABLE gives a bare white grid.
The default alignment of text in cells is to the left but you can override this by specifying
columns to justify right - typically for figures - with c-column number-r.
For example c4r will right justify the fourth column. Similarly background shading can
be added using gry blu grn pnk and yel. eg c3grn
Classes total and none can be added to the TR tag.
In the cheat sheet the comment at the bottom of the table is actually a blanked-out row.
It is often convenient to have the title of a table attached to it. For this purpose
the first row is commandeered for a table-wide heading using titleR1. You
have to colspan=6 or however many columns there are.
When using this feature you can stick headings on the second row with shadeR2
instead of the usual shadeR1.
3.4Lists for layout and action
As with tables we can use lists for two purposes: A convenient way of organising
vertical space and a powerful communication tool. Have a look at the cheat sheet
for what you need to know. Notice how in all cases the real-estate of the list
nicely encompasses the whole thing.
- The bare style gives you what is in effect a single column table. What use is that?
Well you could put it inside a single row table when you don't want rows matching across.
You can use it to become a series of paragraphs, perhaps with different styling. (Adding
dotted makes this more obvious.) Most usefully you can quickly whisk-up a list
to put beside some text with something like UL class="bare bgblu w4 right frame1"
(Bare list, sky background, 25% width floated right with a single line frame.)
- UL class=ticks is a good way to implement a checklist. The
default item glyph is a bare box. Add t0, t1, b0 or b1 to each
list item as required.
- Adding title to UL turns the first item into a
title. This might appear an odd thing to do at first but it can be quite handy to
make sure that the title is closely associated with the list so that as the list
moves or shifts during laying out it can't get separated. This
doesn't work with OL.
- Adding dotted to UL or OL
introduces a break line between items which can sometimes be visually pleasing and
helps to separate items.
- Normally sub-lists are implemented by nesting ULs or OLs within LIs. You can 'cheat'
by adding m-something to the list item. This is only sensible works for UL.
3.5Pictures made simple
We're all familiar with IMG but we're also familiar with
reluctance to stick where they're put and stay with their caption. The cheat sheet shows
the code and examples. The styling of the caption is done in the CSS
(div.img) so you may want to have a look at that.
3.6Miscellaneous features
3.6.1Email address
One of the annoyances of the web is the harvesting of email addresses to be used to send spam.
There is a technique used in the framework which makes it difficult for bots to steal
this while being perfectly readable to a human. To use it you need to edit the
following two lines in the framework CSS:-
span.email:before {content:"some_post_box";}
span.email:after {content:"some_domain";}
In the HTML you put just <span class=email>@<span>.
When it comes to being displayed all browsers show the full email address
and only IE allows it to be cut and pasted whole. Most browsers only cut the '@'.
If you want to vary the email address on a document by document basis then put the 'before' and 'after' tweaks
into a STYLE block after the link to the framework CSS file.
3.6.2Blocks of code
Being a programmer I often want to display blocks of code. That's simple except in IE.
DIV class=code with the lines of code inside. There are
two SPANs that work inside a code div.
- note An discussion about the code
- slashes formatting for where double-slash would be used
3.7Newspaper columns
This text should be displayed in a number of columns. Each is declared as "15 em" wide. If not then the
browser doesn't support 'newspaper' columns. (We discussed the benefits of narrower columns of text
above.) The advantage of a newspaper column over a table is that the content
will automatically be flowed from the bottom of one column across to the top of the next and so on.
You can specify the number of columns you want with col2, col3 or col4 but usually
a better way is to set the column width and let the browser do the rest. These widths are nominally
in ems but you may want to experiment. The classes to use are col10, col15, col20 or col25.
The other column style is colRule which adds a dotted line between columns.
Experiment by resizing the width of your browser to see how this works. The style for this DIV is col15 colRule
4Technicalities
4.1Printing
Zone of failBrowsers vary from appalling to not very good —
certainly not good enough for user documentation — in their ability to print.
It is quite possible to print HTML but don't expect advanced formatting and web-fonts to work.
The on-line HTML to PDF converters range from 'give-up' to 'something recognisable'.
One of the issues is breaking pages. Basically anything other than a hard page break is
unreliable. To force a new page add newPage to something like a P
or a DIV.
4.2Browser differences and quirks
I expect there are some. There used to be a list of known issues with browsers here but it was back in the days of Firefox 5.1 and Internet Explorer 8
5Authoring and style
5.1HTML is different
Writing directly in HTML is not suitable for everything or everybody — far from it.
However there is a niche for documents that carry a lot of information
and exploit the features of HTML to get it across to the reader effectively.
The purpose of this framework is to make it quicker to present
documents with consistent style.
This document is a good example of the sort of use for HTML. A tutorial often benefits
from compartmentalisation of information and quick summaries. Obviously while writing
this I've used a plethora of effects while you may find your work is 90% plain text
with the odd table or picture. Nevertheless the framework makes it easy for you
to create a standard look and feel to your documents and sorts out a lot of tricky CSS
styling and positioning so all you have to do is bash the words onto the screen.
5.2Developing your own
Steal the CSSThe CSS in this framework has a number of tricks
that you may want to use elsewhere. By all means do so.
What you see here is my style that I've developed and amalgamated over time.
I expect you'll want to tweak the appearance to suit your preferences and add
features. For that you have to get stuck into the CSS. In the mean time
have a play so you can get a feel for the convenience of things like
H6 and
DIV=img.
You'll almost certainly want to fiddle with fonts.
5.3Remember the reader
Finally remember the reader. They are probably tired and don't want to read your stuff anyway.
That's what I like about HTML, you can add interest by directing attention. A few boxes, a
list of ticks and so on can encourage the reader to keep on going, take bits at a time and
feel they are making quick progress.
Quick reference
- Arrows span arrowN, arrowNE, arrowE ... arrowNW
- Borders frame1 frame2 round1 round2 round3
- Boxouts boxOut, h6 fact info hint warn dont
- Code block div code Inside span=note and span=slashes
- Colours - foreground red green blue black white
- Colours - background invert bgpnk bggrn bgblu bggry bgyel bgwhi
- Colours - columns c1 ... c9 followed by pnk grn blu gry yel eg c4yel
- Columns table c1r c2r ... c9r shadeC1 shadeLastC
- Cursors for links a download newWin newWinOffSite offSite video sound document
- Email address <span class=email>@<span> Details need tweaking in CSS
- Emphasis todo tiny pin blob
- Font sizes f80 f90 f100 f110 f120 f150 f200 f300
- Floating div hardLeft left right centre center down floatfix clear
- Headings H1 ... H4 autonum or Underline section references
- Links a link button foot glos
- Lists ul bare ticks title dotted
- List items li t0 t1 b0 b1
- Newspaper columns div col2 col3 col4 col10 col15 col20 col25 colRule
- Margins (ems) m2 ...m6
- Miscellaneous p=newPage div=sectionNum div=foot
- Pictures h6 img IMG goes inside followed by caption
- Rows tr total titleR1 shadeR1 shadeR2 none
- Tables - informal table hlines boxed glossary
- Tables - formal table table
- Text span q emph name code path tag txl txc txr
- Ticks span tick0 tick1 tickBox tickBox0 tickBox1
- Top of page div topMenu title1 title2
- Vertical space p vspace gap
- Widths w2 ... w6, w60 ... w100, wall
Full cheat sheet
The author of the framework and this guide is Peter Fox, a freelance web developer from Essex, England.
If you find it useful, find a bug, have some changes you'd like to share then let him know at @ or search for vulpeculox on github.
This version dated 6th December 2018