Indenting content in Flare (and HTML in general) using styles

Many Flare users find that they want to create indented text for one reason or another. A classic example is when they want to include a code sample.

If you create a class of P called ‘code’ and apply it, physician you get all the code at the same level, website like this like this:

<html>

<head>

<title>This is the title</title>

<head>

<body>

</body>

</html>

For readability, view typically  you want the text to have a couple of layers of indenting, like this:

<html>

<head>

<title>This is the title</title>

<head>

<body>

</body>

</html>

This is easy to do in CSS. You’re just adding a marin-left to indent the code. Where people make the mistake, however, is when they try too hard to solve this problem. I find this to be especially true for people who have come from a Framemaker background, because the solution I’m going to propose doesn’t work in Frame (last time I used Frame, which was, admittedly, a while ago).

So you are looking at your Flare styles (or, more generally, your CSS styles) and you decide that you need a class of ‘P’ for code. We’ll call it p.code.

Now you need to indent that, so you think that you need a class of ‘P’called p.codeindent. You give this class all the settings of p.code (since it can’t inherit from another class of ‘p’), and then you add a margin-left of (we’ll say) 20px.

To finish my example above, you’d need a third class of ‘P’ called p.codeindent2. You give this class all the settings of p.code (again, can’t inherit these styles), then you add a margin-left of 40px.

This gets hard to manage awfully quickly, especially since your settings may be different in your Print media section in your style sheet. Here is what that looks like in Flare:

The best solution is much, much easier than all of that.

Instead of adding extra classes for every class of p that might need an indent at some point in your project’s life, create one style in your style sheet: div.indent, and then give that div a margin-left of 20px. Because of the magic of margins being added in CSS, if you need to indent two levels, you add another div.

Here is what that looks like in Flare:

Notice the two DIV elements. Those divs have a class of “indent”, which, when nested, adds the margin to the child elements. The beauty is that I can do this anywhere in my project with any child elements, and I can nest as many DIVs as I need to indent the content.

Now imagine that Marketing comes back and says “All your indents are too small. The new standard is 30px for each level.” Great. You just go into div.indent and change that ONE style, and all your indents are fixed.

Using the old method, you have to go into every level of every style and make the indents match. That method is a headache to maintain, difficult to update (especially for a new user in your project), and is inelegant.

The div solution is easy to maintain and update, and is elegant because of how many lines of code this will save you in your stylesheet.

 

 

, , , , , , , ,

2 Responses to Indenting content in Flare (and HTML in general) using styles

  1. Jessica June 19, 2014 at 1:11 pm #

    I love this idea but can you show a code sample in stylesheet. I have followed these directions and, when I apply the div style, it removes the code. The last time I tried it, Flare crashed.

    I must be missing a step.

    Thanks!

  2. Olia November 6, 2015 at 8:49 am #

    What if I need to indent all text (including paragraphs and ul/ol lists, images, etc.) after a specific heading (h3, for example). How do I do this?

    Thanks

Leave a Reply