Note

That piece of software is not maintained anymore as I dropped DokuWiki in favor to other solution.

License

This software is provided as it is witout any warranty. Licensed on LGPL.

Examples

Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

– Steve Jobs

If you are going through hell, keep going.
-- Winston Churchill

Page was last updated: 2011/02/16

Typography

plugin for DokuWiki

Typography plugin extends DokuWiki by typesetting abilities.
There is sometimes need for nice looking quotation, slogan or even article paragraphs.

It is syntax plugin. Current functionality covers all aspects and abilities of HTML:

favourite font family usage
sizing the font
line height adjustments
set small-caps variant on current chosen face
manipulate spacing between letters and words

It gives ability to adjust settings for text look, but does not influence subtle stuff like text baseline or vertical alignment.
Check examples, that will explain probably best what I mean (baseline for this page is 20px).

Features & Constraints

As everything, Typography plugin has it's strong and weak sides.
One of the nice things, is that you can use parameters in any order.
Currently supported units are:

px – pixels
em – a unit of measurement in the field of typography, equal to the point size of the current font
ex – similiar in concept to em units, with difference that base size for font is it's small letter "x" size.
pt – points (per pixel), this setting depends od browser/printer dpi
% – percents

Pixel unit px does not allow you to use decimal part, so 20px is accepted but 20.5px is not.
Due to text-height css property handling when element has children in document tree, this sometimes can behave not as precise as you wish to.

Syntax

Whole syntax walks around <typo parameters>beatifull looking test</typo> where parameters syntax looks quite intuitive: name:value; (Have in mind there is no space after colon and do not forget about semicolon).

Adjusting font size

For example lets check font size 10 pixels and 10 points. Those are different, size based on points is browser/printer dpi dependent and differs (sometimes a lot) from pixels.

For relative sizing you can use em units or percents. As you can observe 1.2em = 120%.

Lets check how wiki markup looks like for that paragraph.

		For example lets check font <typo fs:10px;>size 10 pixels</typo> and <typo fs:10pt;>10 points</typo>. Those are different, cause size based on points is browser/printer dpi dependent.
		For relative sizing you can use <typo fs:1.5em;>em units</typo> or <typo fs:150%;>percents</typo>. As you can observe 1.5em = 150%. Lets check how wiki markup looks like for that paragraph.

~~You should remember that font size change can in many cases break vertical rythm of text.~~ Handling vertical rythm of text flow can be handled by adjusting vertical align. In most cases you dont have to worry, plugin can handle most cases with defaults.

Setting font family

Let's see this markup in action. Current paragraph should have Trebuchet MS font face choosen, if not found standard browser sans font will be used. Additionally you can specify smallcaps parameter right after tag name. You can use only smallcaps flag without specifing font family to smallcapsize default font face.

	<typo ff:Trebuchet MS, sans;>Let's see this markup in action. Current paragraph should have **Trebuchet MS** font face choosen, if not found standard browser **sans** font will be used.</typo> <typo fv:smallcaps;> Additionally you can specify //smallcaps// parameter right after tag name.</typo> You can use only //smallcaps// flag without specifing font family to smallcapsize default font face.

Composition

To give you more power in typography on your wiki, text line height, letter spacing and word spacing adjusting is possible.

	<typo lh:40px; ls:2px; ws:15px;>To give you more power in typography on your wiki, text line height, letter spacing and word spacing adjusting is possible.</typo>

Full-featured example

Let's see the code of quotation on top of page.

		<typo fs:1.8em; ff:Iwona, Georgia, serif; ls:-2px; ws:-0.1em;>Programming today is <color #F0276E>a race between software engineers</color> striving to build bigger and better idiot-proof programs, <color #F0276E>and the Universe</color> trying to produce bigger and better idiots.</typo> <typo fs:1.8em; fv:smallcaps; lh:10px; ff:Iwona, Georgia, serif;>So far, the Universe is winning.</typo>

Here goes all possible parameters sheet as quick reference.

functionality	parameter syntax	comment
font family	<typo ff:Coma separated, font famliy names, can contain spaces;>Text</typo>
font variant	<typo fv:smallcaps;>Text</typo>	only "smallcaps" value allowed
font size	<typo fs:20px;>Text</typo>	values below zero not allowed
line height	<typo lh:20px;>Text</typo>	values below zero not allowed
letter spacing	<typo ls:20px;>Text</typo>	values below zero allowed
spacing between word	<typo ws:20px;>Text</typo>	values below zero allowed

Download

Changelog

2009/02/04

initial release

2011/01/13

tweaks for font sizing, as it changes due to inline box model in browsers

Contact

Report bugs, suggest features or improvements directly to me.