A reader emailed me about this and I thought it would be great to write about. For the record, I have called MadCap Tech Support about this issue….at least once.

The scenario: I’ve just created this awesome new style class that will prevent the H1 for Table of Contents from appearing in the Printed TOC. I called it h1.TOC. And here it is:

h1_no_toc

<foreshadowing>Notice how I added the new style class to the Print medium. </foreshadowing>

I’m all excited to use it and I head back to my Printed_TOC topic so I can apply this new style class to the H1 on the page.

plain_h1Except it isn’t there! Wait, what?! I know I saved the new class…so where the heck is it?

The answer: The styles you see in the Styles Window depends on the medium in which you’re viewing the topic.

If you look at that last screenshot, you’ll see that the medium is set to default…and there’s no H1.TOC.

I’m going to change the medium in the XML Editor to Print…and you can see what happens.

print_medium_view

Yeah! I can see my new style class!

Here’s a side-by-view of the h1s in my project, with the Print h1s on the left, the default h1s on the right. Flare is kind of nifty in that it doesn’t clutter the list with styles that are exclusively for a medium that you’re not using.

styles_print_media

So, the next time you panic that you did something wrong when you can’t find a new class, take a deep breath and check what medium you’re using.

Keep With Next and Keep Lines Together – Word Concepts Implemented in Flare

I was writing the Image Sizes post the other day and came across a list that broke across two pages and I had my next post!

Here’s what happened:

lists1

That is sooooo awful….I have to make it stop!

One thing I will NOT do is add empty <p> tags to make it work. Ick!

Instead, I’m going to use my favorite three letters….say them with me….C – S – S …to make it work.

Keep Lines Together

Since I want all unordered lists to stay together, I’m going to change the root <ul>. I generally recommend against doing this – but since I want all lists to stay together by default, I’ll set the style on the root.

Again, this is mostly of concern when working with printed output. So I’m going to set this property on the Printed medium.

In my<ul> tag, I scroll down to the Print Support property group and find page-break-inside. Set it to avoid.

lists2

Let’s do a quick build to see how it looks.

lists3

Ah, nice! But if you notice I now have the introductory sentence split from the list. I fixed the splitting list – but it’s now separate from its intro sentence. I’ll fix that now.

Keep With Next

The easiest method, to set the ul to page-break-before: avoid – doesn’t do the trick. I don’t know why. Here’s what I get when I do that:

page_break_before

I have to come up with another plan. I could create a div around the <p> and the <ul> and set it to page-break-inside: avoid. But that would take too many clicks. Lots of clicks = BAD.

There’s not a complex selector that sets the first tag in a series to a certain property….like “any <p> that immediately precedes a <ul> should be page-break-after:avoid.”

And I can’t do an ID (#) because I can only have one of those per page…and I may have more than one bulleted list on a page. SOooooooo…..I’ll do a generic selector like this:

.bullet_intro { page-break-after:avoid; }

And then assign each <p> that precedes a bulleted list this style.

add_generic

When I do a build, I see that the introductory sentence and the bulleted list are together on the next page.

intro_bulleted_list

Also, when I assigned the style to the <p> tag, not much changed…but when I leave the topic and come back (in this instance, I closed the topic and reopened it), I see that there is a neat little icon to the left of that line of text AND the sentence has moved down to the start the following page.

avoided_page_break

Now, whenever I have an intro sentence before a bulleted list, I’m going to apply that generic class and all will be well with the world.

Please note that the way I have done the ‘Keep with Next’ concept – it will only work with UNordered lists. If you want it to work with ORdered lists, you’ll need to set the same property, page-break-inside, on the <ol> tag.

Also, by creating a generic class as opposed to a p.bullet_intro, I can use that class with ANY tag that may precede a bulleted list including headings, etc.

Try it out – let me know if you have any questions. I’m here for you.