Font builder s24 – f300
Font Builder – Paragraph & Line Break ManagerFlexible, custom method to handle typographic page layouts

How the page logic works   1. Wpautop is disabled in the page. | 2. The tag ‹L› ‹/L› is inserted for natural line-breaks when required.
1. Disable wpautop is ON   -› the annoying wpautop line breaks are ignored within this whole page's structure! ADVANTAGES: 1. No more unwanted and uncontrolled ‹p› or ‹br› tags in the final output. 2. You can align items vertically in the html for clarity and have them layed out horizontally. • lists of images • rows of formatted texts. 3. ‹!-- Comments --› don't create unwanted spaces anymore. 4. Line breaks can easily be controlled! (see 2. below, L tags)
2. Natural line breaks and line spaces can be controlled with L tags!
‹L› ‹s16› The whole page, OR portions of it, can fit inside L /L tags ... Inside the - L tags -, every "natural line break" counts and acts normally, just like in a word processor. (The L tag uses the white-space:pre-line property). Size tags ‹s..› ‹s12›The - s12 tag - simply formats the font size. (You can have several sizes)‹/s12› ‹s20›The - s20 tag - simply formats the font size.‹/s20› • If no s tag is used, the system defaults to size 14 inside the page. ‹/s16› ‹/L›
‹L16› Even simpler, use L16 /L16 tags ... Inside the - L16 tags -, every "natural line break" counts and acts normally, (just like in a word processor) AND the font is set to size 16 for the whole section or page. ‹/L16›

You can still use the ‹b4›‹/b4› etc. and ‹hr class="_10"› elements for more detailed line space control.
Glossary, Instructions | wpautop, L and s tags › ...

• Disable wpautop 'ON' eliminates the automatic ‹p› and ‹br /› tags for this page. (These tags are systematically added by Worpdress and plague the html output in places where they are not wanted). • ‹L› ‹/L› defines "natural line-break" content portions with the CSS property "white-space:pre-line". Typcally inserted at start and end of post content for simple layouts. • ‹s8› ‹/s8› to ‹s100› ‹/s100› define the font sizes (in various incremental steps: 8-20 incr·1by1 | 20-40 incr·2by2 | 40-100 incr·5by5 ). • ‹L10› ‹/L10› to ‹L20› ‹/L20› combine both the ‹L› tag and tags ‹s10› to ‹s20› (ie. the pre-line AND the font size for a simple paragraph or section. See samples below). • ‹f300› ‹/f300› to ‹f800› ‹/f800› defines font weights (thin to extra bold). • ‹br› works fine as a line break and line space tag, just like ‹br /›. • ‹b-10› ‹/b-10› define granular line spaces between paragraphs. (b-10, very narrow to b10, very large) • ‹hr class="_0"› to ‹hr class="_50"› also define granular line spaces between paragraphs and content blocks. (No closing tag required). - This section has L16.


Example1 | Paragraphs with tags › ...
‹L› (Pre-line) L12 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ››CR line break Next line. L13 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. L14 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. L15 Title: ››CR line break Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. L16 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. L17 This paragraph has a font size of 17px L18 This paragraph has a font size of 18px ‹/L›

Example2 | Combining s tags, f400 tags and color tags


Font size 7px Font size 8px Font size 9px Font size 10px Font size 11px Font size 12px Font size 13px Font size 14px Font size 15px Font size 16px Font size 17px Font size 18px Font size 19px Font size 20px | & 10px Font size 22px Font size 24px Font size 26px Font size 28px Font size 30px Font size 32px Font size 34px Font size 36px Font size 38px Font size 40px
Font size 45px Font size 50px Font size 55px Font size 60px Font size 65px Font size 70px 75px - 100px