Hanging indents, how?
-
- Senior Propellus Maximus
- Posts: 2634
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Hanging indents, how?
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
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
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Senior Propellus Maximus
- Posts: 3672
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Hanging indents, how?
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.
In the style sheet, these attributes look like this:
p.Note
{
text-indent: -40px;
margin-left: 40px;
}
Hope this helps!
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.
In the style sheet, these attributes look like this:
p.Note
{
text-indent: -40px;
margin-left: 40px;
}
Hope this helps!
You do not have the required permissions to view the files attached to this post.
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Senior Propellus Maximus
- Posts: 2634
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Hanging indents, how?
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:
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:
You do not have the required permissions to view the files attached to this post.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Senior Propellus Maximus
- Posts: 3672
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Hanging indents, how?
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!![Smile :-)](./images/smilies/icon_smile.gif)
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!
![Smile :-)](./images/smilies/icon_smile.gif)
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Senior Propellus Maximus
- Posts: 2634
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Hanging indents, how?
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!)![Smile :)](./images/smilies/icon_smile.gif)
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!)
![Smile :)](./images/smilies/icon_smile.gif)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Senior Propellus Maximus
- Posts: 3672
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Hanging indents, how?
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!![Very Happy :D](./images/smilies/icon_biggrin.gif)
The important thing is to WRITE IT DOWN!
![Very Happy :D](./images/smilies/icon_biggrin.gif)
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Senior Propellus Maximus
- Posts: 2634
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Hanging indents, how?
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! ![Smile :)](./images/smilies/icon_smile.gif)
![Smile :)](./images/smilies/icon_smile.gif)
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Senior Propellus Maximus
- Posts: 3672
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Hanging indents, how?
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...
Others may disagree, but I wanted to give you a heads-up...
Nita
![Image](http://forums.madcapsoftware.com/download/file.php?id=2449)
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: Hanging indents, how?
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.Nita Beck wrote:Others may disagree, but I wanted to give you a heads-up...
Lisa
Eagles may soar, but weasels aren't sucked into jet engines.
Warning! Loose nut behind the keyboard.
Re: Hanging indents, how?
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.
-
- Senior Propellus Maximus
- Posts: 2634
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Hanging indents, how?
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.
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.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
-
- Jr. Propeller Head
- Posts: 8
- Joined: Wed Jan 02, 2013 12:44 pm
- Location: New York City
Re: Hanging indents, how?
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:
Here's an example of how it looks:
The positioning is klugey, though:
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}';
}
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.
- 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.
You do not have the required permissions to view the files attached to this post.
Re: Hanging indents, how?
Well ... if you're not "scared of graphics", you can achieve this with a p.note class:
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:
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.
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:
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; }
You do not have the required permissions to view the files attached to this post.
Inge____________________________
"I need input! - Have you got input?"
"I need input! - Have you got input?"
-
- Jr. Propeller Head
- Posts: 8
- Joined: Wed Jan 02, 2013 12:44 pm
- Location: New York City
Re: Hanging indents, how?
Thanks, i-tietz. Although as you noted, it doesn't account for one of the OP's requirements, which was also one of mine:
I may give up on that requirement, though, as not being worth the cross-media and cross-output finessing."Note", "Tip" and "Caution" paragraphs to be all indented to the same distance
Re: Hanging indents, how?
Yes it does: You just enter in the same padding-left in all three classes.Mark from Brooklyn wrote:"Note", "Tip" and "Caution" paragraphs to be all indented to the same distance
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 ...Mark from Brooklyn wrote:I may give up on that requirement, though, as not being worth the cross-media and cross-output finessing.
Here screenshot of a PDF I produced:
You do not have the required permissions to view the files attached to this post.
Inge____________________________
"I need input! - Have you got input?"
"I need input! - Have you got input?"
Re: Hanging indents, how?
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.ChoccieMuffin wrote: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!
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;
}
}
You do not have the required permissions to view the files attached to this post.
-
- Propeller Head
- Posts: 37
- Joined: Wed Mar 11, 2009 11:14 am
Re: Hanging indents, how?
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.
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.
Nita Beck wrote: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.
In the style sheet, these attributes look like this:
p.Note
{
text-indent: -40px;
margin-left: 40px;
}
Hope this helps!
-
- Propellus Maximus
- Posts: 1979
- Joined: Tue Nov 28, 2006 11:18 am
- Location: Crossroads of the West
- Contact:
Re: Hanging indents, how?
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;
}
<div class="border">
<p class="note">Whatever text you need</p>
</div>
----
div.border {
border: 1px solid black;
}