Hanging indents, how?

[ChoccieMuffin]

I am trying to create a style that uses a hanging indent, for example a note or tip where the word "Note" is in line with the left margin and all the rest of the text is indented by, say, 20mm. There are a few of these paragraphs, Tip and Caution leap to mind. Another suggestion would be to use an icon instead of the word "Note", but I'm scared of graphics!

I can't find anything in any of the docs to explain how I do it, can you please help? In Word I had a "Note" paragraph style which worked beautifully but there's nothing similar in Flare that I can find.

Thanks

[Nita Beck]

With a negative first-line indent...

Set the left indentation to where you want the body of the note to align, say, 40px. Then set the first-line indent to -40px.

first_line_indent.png

In the style sheet, these attributes look like this:

p.Note
{
text-indent: -40px;
margin-left: 40px;
}

Hope this helps!

[ChoccieMuffin]

Nita, that's great!

Find the nearest Christmas tree and sit on the top of it for you are most truly a star. :

You can't start shining yet though, as I don't know how to get the paragraph AFTER the first word to line up with the rest of the paragraph.

Here's what I mean:

[Nita Beck]

Because Flare (or, more precisely, CSS) doesn't have the concept of a tab stop, you'll need to do this by eye. Perhaps you shouldn't use 40px/-40px, but rather 20px/-20px. Play with it until you like how the paragraph is aligning.

By the way, did you know that you can create an auto-number for your p.Tip style that will put the word "Tip" in for you? That way, you don't have to type "Tip". Furthermore, you can create a span class called something like span.TipLabel that will set the bold for you and then apply that span class to the auto-number of the p.Tip. Think about it: What if someday you want to the word "Tip" not to be bold but instead to be blue italic? Or maybe you decide to use "TIP" instead of "Tip". You'd just need to change the span.TipLabel definition and--voila--all your tip paragraphs are automatically reformatted.

So here'd be the span.TipLabel definition:
span.TipLabel
{
font-weight:bold;
}

And here'd be the p.Tip definition (not including the attributes for the left and first-line indents):
p.Tip
{
mc-auto-number-format: 'Tip: ';
mc-auto-number-class: TipLabel;
}

Learn to harness the power of CSS and Flare's various "mc" attributes!

[ChoccieMuffin]

Thanks again.

I thought for a moment that I'd have to press spacebar multiple times to get things to line up, but now I realise you mean I should set the indent by mucking about with the -40/40 measurement so the indent ends after the word I want to "hang". Thing is, I want my "Note", "Tip" and "Caution" paragraphs to be all indented to the same distance, and I know it's going to be translated so the space needs to be wide enough to allow for longer words to go in that bit too, so your very neat suggestion doesn't quite do the trick.

For my next attempt I'm going to have a go at inserting a table with "Tip" in the first cell and the text I want to use in the second cell. I suspect I'll have to use tables all over the place (something I was advised against) but hey, if it's the neatest way to do what I need then I'd be daft not to.

I'm going to save your very useful span label trick into my "useful bits of info" document that I'm creating and adding to (in Word, I have to admit!)

Edit: I inserted a table, and created new classes for <td> so that I could have "Tip" in bold or whatever, and the second column containing the tip in italic, as that's how I've decided I want it. Took a bit of figuring out, but it seems to do what I want it to do. (And I wanted the tip to be inserted in a list and indented the same as the numbered list, so I followed other advice on here and that worked as well - I'm much happier now!)

[Nita Beck]

Hey, I am a big advocate of "documenting your design decisions." My Flare colleagues in my community hear me say that often. And there is no shame whatsoever with documenting them using Word or any other tool that you find quick and easy to use. I use OneNote myself, which lets me share the info across several computers without having to copy over any files. My intention is eventually to create a Flare project that captures all of my best practices. I've started that Flare project several times, but just don't seem to get very far in it! So for me, the little "cheat sheets" in OneNote work just fine, as I'm sure yours in Word will do as well.

The important thing is to WRITE IT DOWN!

[ChoccieMuffin]

And now to figure out how to create and use table styles... this learning curve's not just steep, it's much closer to a cliff face!

[Nita Beck]

Let me offer a whispered word of caution re table styles. For as much as I love most things in Flare, I prefer not to use the table style feature. In my experience, it is more trouble than it's worth. I've been much happier creating table styles in my main style sheet and then applying those styles to tables and table elements (e.g. rows, columns) as needed.

Others may disagree, but I wanted to give you a heads-up...

[LTinker68]

Others may disagree, but I wanted to give you a heads-up...

I agree to the point that if you have merged cells you'll want to avoid the table stylesheet, but if you're not merging cells, then I'm more inclined to use table stylesheets now that someone has pointed out how easy it is to insert paragraph tags inside table cells, which means you can apply paragraph-level styles that override the table styles where needed. You'll probably still need to create a complex selector and adjust some styles, but that at least gives you more flexibility to pair the easy alternating row (or column) color formatting with single cell/row "highlighting" of content when needed.

[wbrisett]

Here's one other tip I found just today about hanging indents. If you are multi-sourcing your output, you'll want to be very careful especially with the PDF output. What looks good on screen and aligned, probably won't be in the PDF output. There's a lot of trial and error with the PDF hanging indents.

[ChoccieMuffin]

A quick update on the code I posted earlier, which I hadn't noticed until I looked more closely at the output.

What you might see if you look closely at the output is that there's a number 1 superimposed on all the other number bullets, which is not what I want (unsurprisingly). So in case anyone's thinking of copying the code above, DON'T! Working on an alternative strategy for my numbered lists and will post it when I've worked it out, but don't use this as an example as it just doesn't do the trick.

[Mark from Brooklyn]

Consider using the mc-auto-number-format property to specify the "Note" label. Together with Nita's suggestion about the +/- positioning, this may be the best that we can do now, until Flare directly supports hanging indents.

For example:

Code: Select all

	p.Note
	{
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-top-style: solid;
		border-top-width: 1px;
		border-bottom-color: #e47f00;
		border-top-color: #e47f00;
		background-color: #fff3c5;
		text-indent: -7em;
		margin-left: 7em;
		mc-auto-number-format: '{b}{color #e47f00}Note: {/color}{/b}{color #ffffff}-___{/color}';
	}

	p.Warnings
	{
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-top-style: solid;
		border-top-width: 1px;
		border-bottom-color: red;
		border-top-color: red;
		background-color: mistyrose;
		text-indent: -7em;
		margin-left: 7em;
		mc-auto-number-format: '{b}{color red}Warning: {/color}{/b}{color #ffffff}.{/color}';
	}

Here's an example of how it looks:

NoteAndWarning.png

The positioning is klugey, though:

• Since CSS3 doesn't support tab stops, and Flare doesn't support hanging indents, I've had to account for the space between the paragraph's label and body by inserting some characters, such as underscores, periods, and spaces (see the end of the mc-auto-number-format declaration).
  I render the characters invisible by making them white. (I tried various ways of specifying that they be transparent, but Flare didn't seem to support that.)
• I needed to experiment with the number of characters, and use characters of different widths, until I got the spacing just right.
• I needed to specify a different set of characters for each medium (e.g., print, online), because the space between the label and body differed for each medium.
• I needed to verify that the positioning was correct in generated output, because spacing that looks right in the editor may appear differently in, for example, a PDF.

I tried several alternatives to this approach, but none worked:

• Specifying a "Note" label via the before pseudo-element and the content property.
• Specifying the text-indent property with the hanging keyword, which is described in a World Wide Web Consortium CSS3 working draft (http://www.w3.org/TR/css3-text/#text-indent) from November 2012.

I encourage everyone who needs this to submit a new feature request to support hanging indents in block-level elements such as paragraphs: https://www.madcapsoftware.com/feedback ... quest.aspx

[i-tietz]

Well ... if you're not "scared of graphics", you can achieve this with a p.note class:

via_background_image.png

AND: If you find somebody who knows what he can do with graphics you can even get words like "Note" or "Warning" instead of the improvised button I picked. But I have to admit that's difficult to translate ...

Another solution - without graphics, but with two classes. I called them "floatleft" (that's the paragraph with "Note" or "Warning") and "note" or "warning" for the following text and with the padding-left, background-color and borders:

via_floating_paragraph.png

Code: Select all

body {
	font-family: Verdana;
	background-color: #ffffff; }

p {
	font-size: 12.0pt;
	margin-top: 6pt;
	border: none;
	padding: 0px; }

p.floatleft {
	padding: 6px;
	margin: 0px;
	border: none;
	float: left;
	font-weight: bold; }

p.warning {
	padding: 6px;
	padding-left: 100px;
	margin: 0px;
	background-color: #ffcccc;
	border-bottom: 1px solid #ff0000;
	border-top: 1px solid #ff0000; }
	
p.note {
	padding: 6px;
	padding-left: 60px;
	margin: 0px;
	background-color: #ffffcc;
	border-bottom: 1px solid #ff9900;
	border-top: 1px solid #ff9900; }

AND: Even with an indent implemented you won't cover the different word lengths of translated texts. You will always have to adapt the indent to the length of the word at the left.

[Mark from Brooklyn]

Thanks, i-tietz. Although as you noted, it doesn't account for one of the OP's requirements, which was also one of mine:

"Note", "Tip" and "Caution" paragraphs to be all indented to the same distance

I may give up on that requirement, though, as not being worth the cross-media and cross-output finessing.

[i-tietz]

"Note", "Tip" and "Caution" paragraphs to be all indented to the same distance

Yes it does: You just enter in the same padding-left in all three classes.

I may give up on that requirement, though, as not being worth the cross-media and cross-output finessing.

To use floating text is an idea from my tests for a PDF target. And the printing of text floating beside other text really comes up with a good result! No matter whether the printer produces a PDF or paper ...
Here screenshot of a PDF I produced:

pdf_with_floating_text.png

[sfoley]

I am trying to create a style that uses a hanging indent, for example a note or tip where the word "Note" is in line with the left margin and all the rest of the text is indented by, say, 20mm. There are a few of these paragraphs, Tip and Caution leap to mind. Another suggestion would be to use an icon instead of the word "Note", but I'm scared of graphics!

Here's what I use (see attachment). It works consistently in HTML and PDF output. The reason for the second set of rules is that Flare's WYSIWYG editor chokes on relative units.

Code: Select all

p.note {
	mc-auto-number-position: outside-head;
	mc-auto-number-format: '{family Calibri}{size 1.1em}{b}NOTE{/b}{/size}{/family}';
	mc-auto-number-offset: 4.8em;
	margin-left: 9em;
}

p.warning {
	mc-auto-number-position: outside-head;
	mc-auto-number-format: '{family Calibri}{color #c00000}{size 1.1em}{b}WARNING{/b}{/size}{/color}{/family}';
	mc-auto-number-offset: 7.83em;
	margin-left: 9em;
}

@media screen {
    p.note {
        mc-auto-number-offset: 54px !important;
        margin-left: 110px !important;
    }

    p.warning {
        mc-auto-number-offset: 90px !important;
        margin-left: 110px !important;
    }
}

[scooter262]

I want a hanging indent, but I want a box around EVERYTHING, including the text that I've moved to a negative margin.

When I do what Nita says, setting text-indent negative, and the margin-left indented, the box I draw around the paragraph starts at the margin-left value, rather than at the "new" left margin, which I set to negative 40.

With a negative first-line indent...

Set the left indentation to where you want the body of the note to align, say, 40px. Then set the first-line indent to -40px.

first_line_indent.png

In the style sheet, these attributes look like this:

p.Note
{
text-indent: -40px;
margin-left: 40px;
}

Hope this helps!

[doc_guy]

Probably the easiest way is to nest the paragraph in a div with a border around the div.

<div class="border">
<p class="note">Whatever text you need</p>
</div>

----

div.border {
border: 1px solid black;
}