Library of Formatting Examples talk:Main

This page describes how to build an LOFE example page using the templates.

The Example Wrapper

Each example is wrapped in a div tag with one of three classes. Most examples should be wrapped in:

This creates a flexible layout. For examples where you want to force a side by side layout regardless of screen width, instead use:

There is a third type with a floating image and no formatted text that hasn't yet been implemented.

Building the example

There are three templates used to build the example: one at the start of the example, one in the middle, and one at the end. The section below explains how each template works and what goes in between them.

The Start Template

The start template is the most complex and takes a number of arguments. Call it with:

{{LOFE:Example start |argument=value...}}

The start template takes the following arguments:

image-filename

the wiki filename of the page image. Do not include "File:".

image-max

a class ID representing the maximum image size, in ems.

text-max

a class ID representing the maximum size in ems for the formatted text block

text-min

a class ID representing the minimum size in ems for the formatted text block

size

add "size=small" to use a smaller text size in the correctly formatted text; useful in side-by-side display. Default is "normal."

The permitted values for the -min and -max values are:

/* minimums with m */

div.lofe-m20 {min-width:20em;}
div.lofe-m30 {min-width:30em;}
div.lofe-m35 {min-width:35em;}
div.lofe-m40 {min-width:40em;}
div.lofe-m45 {min-width:45em;}
div.lofe-m50 {min-width:50em;}
div.lofe-m60 {min-width:60em;}

/* maximums with x */

div.lofe-x20 {max-width:20em;}
div.lofe-x30 {max-width:30em;}
div.lofe-x40 {max-width:40em;}
div.lofe-x50 {max-width:50em;}

By default, the text block will have a minimum width of 35em, and both elements will have a maximum width of 50em.

Correctly Formatted Text

After the start template comes the correctly formatted text example. Start with just the correctly formatted text, then make the following changes:

• Add four spaces to the front of each line, including blank lines, in the source editor to create a single block of monospace text. Note: you cannot use pre tags or any other method to achieve this; it will cause the tags not to work.
• Where the number and spacing of blank lines is important, use the template {{LOFE:Blank}}.
• Replace any HTML-style tags that appear in the text with the {{LOFE:Tag}} template. Remember to replace both opening and closing tags:

    <sc>Tools and Appliances</sc>

• Where there is a short comment directly related to a specific line of text, use the {{LOFE:Comment}} template to add a comment.

   [** This line is Mixed-small-caps; mark it]

• In the original LOFE, all discussion was placed in the example as comments. Here, comments should only be used where they relate to a specific line; general discussion of the topic should instead go in the discussion section, below.

The Middle Template

After the formatted text, call the middle template with:

   {{LOFE:Example middle}}

This template does not need any arguments or customisation. It will close the formatted text block and set up for the discussion section.

Discussion

At this point, there should be a brief discussion of the example. This starts with level 1 subhead summarizing the primary issue:

   ===Italicized paragraphs===

with lower-level subheadings as appropriate.

Some examples are used to demonstrate more than one type of formatting--for example, [example] discusses both small caps and front matter. In that case:

• List the issue related to the current section first (so under Front Matter the front matter section will come first);
• Use a new level 1 subheading for the separate topic; and
• Include links to the section and the specific discussion related to any other topic.

The End Template

Like the middle template, the

   {{LOFE:Example end}}

Don't forget to place the closing tag for your div at the end of the document, after the end template.