Text indented in bullet list

[straygoat]

Hello all

I need to create a nested bullet list that has text on a line in between list items. So:

<li> Item 1
<li> Item 2
<nested li> Item a
<nested li> Item b
text indented
<li>Item 3

Could someone tell me what is the best way to achieve this in Flare? I've tried to use the convert to paragraph feature, but that seems to create <li><p> which isn't what I need - the <p> should be nested in the list, but not an <li> itself. Is that possible?

To further complicate matters, I need the indent to be aligned with the text of the previous bullet point and not the bullet itself.

[wbrisett]

<li> Item 1
<nested li> Item a
text indented

<snip>

To further complicate matters, I need the indent to be aligned with the text of the previous bullet point and not the bullet itself.

Open your stylesheet in a text editor and use:

li li p
{
margin-left: 0.xxin;
}

where xx is the value you want the paragraph moved over (so it aligns with the text in the second bullet). You'll have to experiment with that value. Once you add the complex item to the stylesheet, it appears in the Flare GUI, so you can then make adjustments to the stylesheet from within Flare.

Wayne

[straygoat]

Thanks Wayne, I'll give that a go.

But is a P within a UL or OL valid HTML?

[hjord]

Having a paragraph directly in a list is not valid HTML, but Flare 'allows' it.

For example, this is not really valid, but it does work:

Code: Select all

<ol>
	<li>Item 1</li>
	<p>Some text</p>
	<li>Item 2</li>
</ol>

However, I have found that the best solution is to have <p> inside the <li> (as you mentioned), followed by the sublist. (You can have any block-level elements inside a <li>). For example:

Code: Select all

<ol>
	<li>Item 1</li>
	<li>
		<p>Item 2</p>
		<ol>
			<li>Item 2a</li>
			<li>Item 2b</li>
		</ol>
	</li>
</ol>

Advantages:

• It's valid HTML
• It's easier to style (IMO)
• It's easier to read in the source, because it's properly indented by Flare

[straygoat]

Hmm...but doesn't that mean your <li> <p> text will count as a list item and so will affect the numbering (if using an OL)?

And what if I don't want a sub-list? I just want the paragraph text to follow a list item? We have this quite a lot, for example, a number 1 list item may say 'do x y z' and the text afterwards will say 'if the abc option is unavailable, make sure the 123 setting is enabled'. Then we go straight to step 2, so there's no nesting, but we need the indented paragraph between <li>s.

Is invalid HTML really the only way to achieve this?

[kwag_myers]

I think you can just use a <div> nested in the <li>, which you may have to do in the Text Editor. If not, set up a <div> sub-style and set the indent accordingly, but a plain <div> should do what you're after. You probably know how, but just in case:

1. Project tab > Master Stylesheet.
2. In the Styles container, right-click div and select Add Class.
3. In the Properties container, select the margin-left pull-down.

[straygoat]

Thanks. Actually, I've not used DIVs in Flare before (I have messed about with them briefly in web editors). How do I apply the DIV to the text between <li>s? Do I have to do that in the text editor or is there a more user-friendly way?

[hjord]

The <p> inside the <li> doesn't affect the numbering. Only the list item gets numbered.

I often have this kind of thing:

Code: Select all

<ol>
	<li>Perform step 1.</li>
	<li>
		<p>Perform step 2.</p>
		<p>This is the result of step 2</p>
	</li>
	<li>Perform step 3.</li>
</ol>

The result will then look something like this:

Code: Select all

1. Perform step 1.
2. Perform step 2.
   This is the result of step 2.
3. Perform step 3.

This is also very easy to do in the XML editor with 'Make Paragraph Item(s)' (Ctrl+;). When you press enter after the paragraph, you just get another paragraph inside the <li>. You could then also give it a different class to distinguish the step command from the step result.

Just try it out and see if it works for you!

[straygoat]

Hi Hjord, yes it works for me - but the code isn't valid HTML (I think not, anyway). It's not a big deal really, but if there was ever a need to put the help on the web, I guess it could affect Google rankings if there is invalid code? Or maybe P inside a UL or OL is supported by HTML5?

[straygoat]

Thinking about it...all of the MadCap-specific tags will be invalid code too, so maybe the best solution for online would be to clean up the htm topics anyway.

[kwag_myers]

Thanks. Actually, I've not used DIVs in Flare before (I have messed about with them briefly in web editors). How do I apply the DIV to the text between <li>s? Do I have to do that in the text editor or is there a more user-friendly way?

I think the easiest way is to do a <div> sub-style, which is actually referred to as a class. If you look at your HTML code you'll see <div class="listindent"... or whatever you choose to call it. In the Style Window you'll just see .listindent, which is how it looks if you open the CSS in NotePad and is the old-school way of coding styles.

You may also be able to select div.listindent from the context menu of the XML Editor, but I've given up on that. It seems to know what I'm looking for a intentionally omits the desired style from the list.

<div class=...>, imho, the easiest way to stylize specific information like hanging text. For example, you can set a colored border and background for all your NOTE: or WARNING: statements.

One thing to keep in mind is that <div> forces a new line. If you want a style to be in-line you need a <span>. If you code for DITA (like I do), you'll use span classes for all window titles, UI controls, etc.

[LTinker68]

I need to create a nested bullet list that has text on a line in between list items.

To further complicate matters, I need the indent to be aligned with the text of the previous bullet point and not the bullet itself.

There's a much easier way to get this done and it appears the way you want by default (that is, the paragraph text lines up with the bulleted text).

Create your list and type the line item that will contain the paragraph. I recommend pressing Enter and put a couple of characters in the following line item (assuming you want another line item after the paragraph). Go back to the line item that will contain the paragraph, then click the drop-down arrow in the List Actions icon in the Home menu and select Make Paragraph Item(s). Flare will insert a paragraph inside the line item tag, although at first glance you won't notice it because you'll still be on the line item (the show blocks area at left will show the paragraph tag inside the li tag). Go to the end of the line item and press Enter and you'll be able to start entering your paragraph. Press Enter again to do a second paragraph, insert an image, etc. To get back to a normal list item without a paragraph tag and if you didn't have a starting line item already set up (see above), press Enter to get a new paragraph, then click the outdent icon and you should see an li tag without a p tag in it. The resulting page-behind code will look something like the following (which is valid HTML):

Code: Select all

<ul>
<li>First line item</li>
<li>
<p>Second line item with paragraph</p>
<p>Second paragraph for second line item</p>
</li>
<li>Third line item without paragraph</li>
</ul>

EDIT: Re-read the posts above and noticed this was pretty much the same thing that hjord second in his/her second post.

[straygoat]

Thanks Lisa,

Yes, that worked. All I needed to do was create a P.Indent class for the P tags within the lis. I set them to have a left-margin of 2em to get the text to line up with the text of the bullet point (rather than the bullet point itself).

[LTinker68]

I set them to have a left-margin of 2em to get the text to line up with the text of the bullet point (rather than the bullet point itself).

You shouldn't have to do that; by default it lines up the text as you want. If you've adjusted the margin or padding values for the li or ol/ul tags then you might need to adjust the paragraph position.

[straygoat]

Without the indent, it aligns under the bullet or number. I don't want that - I want it to align to the text to the right of the bullet or number. When I was experimenting before, the 2em indent was the only successful solution...I'll try it without and see what happens as you are more likely to be right than I am!

[LTinker68]

If you don't modify the styles of list items at all, it'll appear the way you want. If you've set the list style to outdent, I think it is, then yes, it'll go under the number or bullet.

[kwag_myers]

Thanks Lisa,

Yes, that worked...

I'm glad you went with Lisa's suggestion because I just realized Flare's XML Editor doesn't allow you to insert a <div> into a <li>. I must have been looking at some code I converted from another editor.

edit: The only issue I had with Lisa's suggestion is the 1.12 em margin between each paragraph (see step 2 in the attached image). My solution was to modify my original suggestion and add a p.step class for the first paragraph with margin-bottom at zero, and my trusted div.stepresult class for the second paragraph with margin-top at zero (see step 3).

HangingText.png

[chunkee]

Can this also be done for images? When aligning a screen shot in an ordered list, use use a non-breaking space and insert the image. However, sometimes, I need to indent the image to line up with the others on the page. I have clicked the indent button on the toolbar and have chosen blockquote. It seems to work fine, however, there probably is a better way? a div styled to indent?

TY.
john C

[kwag_myers]

Can this also be done for images? When aligning a screen shot in an ordered list, use use a non-breaking space and insert the image. However, sometimes, I need to indent the image to line up with the others on the page. I have clicked the indent button on the toolbar and have chosen blockquote. It seems to work fine, however, there probably is a better way? a div styled to indent?

TY.
john C

Sure, you can do this with a <div>. But if you use the XML Editor you have to follow this procedure to set it up:

The <p> inside the <li> doesn't affect the numbering. Only the list item gets numbered.
This is also very easy to do in the XML editor with 'Make Paragraph Item(s)' (Ctrl+;). When you press enter after the paragraph, you just get another paragraph inside the <li>. You could then also give it a different class to distinguish the step command from the step result.

Assuming you have a line of text followed by an image, if you leave the first <p> alone you'll have a margin between the text and the image, which I think you probably want. Just change the second <p> to a <div> and do a build. If it doesn't align the way you want, add a class to div in your style sheet and make the adjustment in the margin-left or text-align (if you want the image to be centered). You can also give the image a border, background color, etc.

Or, you can go "old school" (like me) and use the Text Editor to just type it in: <div class="listimage">. Either way, you still must use the Make Paragraph Item(s) action to get the nested <p>'s.

[LTinker68]

Can this also be done for images?

Do you mean insert an image in the paragraph in the list? Sure, I do it all the time. I put the instructions or text in the list item, click the Make Paragraph Items, press Return, insert an image, do another Return and insert a caption. I have classes for the screenshot paragraph that centers the image in the paragraph and another paragraph class for the caption that also centers it and has the auto-number option (for print). I also use a toggler that has the image and caption hidden initially, so when the user first opens the topic, he/she sees the list of steps but has options for showing a screenshot if they need to.