Justify ul, li, bulleted list in the stylesheet editor

[seasonedrookie]

How do I edit my stylesheet so that content in my bulleted lists will be justified? This doesn't seem to be an option under unordered list (ul) or list item (li) like it is with p tags. I'm sure there is a simple answer to this, but I'm new. I searched the forum archives and didn't find anything specifically addressing this.

[LTinker68]

Just to make sure we're talking about the same thing... Are you talking about left/center/right justification, or are you talking about how far the list is indented from the left side of the page?

Also, the Stylesheet Editor has "filters" for what you're viewing. To see all attributes, make sure it's set to Show:Property Groups. If it's set to Show:Assorted Relevant Properties then it'll show those attributes that are the most common ones set for that tag. Or something like that -- what it seems to think is relevant doesn't always match what I think is relevant. This is a good view, though, for seeing the Flare-specific attributes (mc- ...) available for a tag.

[seasonedrookie]

Just to make sure we're talking about the same thing... Are you talking about left/center/right justification, or are you talking about how far the list is indented from the left side of the page?

I'm talking about in word processors there are buttons to align text left, center text, align text right, and justify text. I've got my para tag set to justify text and I'd like my bulleted lists to do the same thing.

Also, the Stylesheet Editor has "filters" for what you're viewing. To see all attributes, make sure it's set to Show:Property Groups. If it's set to Show:Assorted Relevant Properties then it'll show those attributes that are the most common ones set for that tag. Or something like that -- what it seems to think is relevant doesn't always match what I think is relevant. This is a good view, though, for seeing the Flare-specific attributes (mc- ...) available for a tag.

I believe I'm seeing all attributes. I don't see "Show: Property Groups," but I'm in the Stylesheet Editor, in Advanced View, and I have "Show All Styles" selected from the drop-down.

I was able to find where I could specify justify under properties>text align>justify. My question is, should I specify this for unordered lists (ul), or for list items (li) in the stylesheet editor?

[crdmerge]

I'm thinking you might want to do the li styling for this. The reasoning? You might want to use specific styles for the overall ul format, but then tailor the li styles with complex selectors based on where the list is used (inside a Note para, inside a table, inside a drop-down, as a sublist, etc.) or what type of content is being included (standard text, monospace, etc.). I haven't tested, so I'm not sure how (or even whether) the justify feature kerns monospace text, so you'd want to test that if you have monospace text in your lists.

I have no problem with justified text in regular paragraphs, but I believe that keeping the default ragged-right format for list items provides a visual reinforcement that these list items are important, yet different. But that's just me!


Good luck,
Leon

[NorthEast]

Use the Advanced view of the stylesheet editor; the property is Block > Text-align. Setting it on ul or li should work, bear in mind the li tag is used in numbered (ol) lists as well as bullet (ul) lists though.

Note that the Show: Property Groups option is only in Advanced view.

[LTinker68]

I don't see "Show: Property Groups," but I'm in the Stylesheet Editor, in Advanced View, and I have "Show All Styles" selected from the drop-down.

There are two "Show" drop-down fields in the Stylesheet Editor when you're in Advanced view. On the left side the show drop-down field filters by tag type (paragraph styles, list styles, link styles, etc.). On the right side the show drop-down filters by attributes (all properties, relevant properties, etc.). That second show drop-down field isn't available in the Simplified view. I generally leave the Stylesheet Editor in Advanced view with "Show All Styles" selected in the first drop-down and "Show:Property Groups" in the second drop-down, although I'll occasionally switch that to "Show:Assorted Relevant Properties" because that puts MadCap-specific attributes at the top for those tags that normally use them (for other tags they won't show up in this view until you use the mc- attribute).

[holmesdm]

Instead of applying the Justify attribute to a style, I would like to left justify a bullet list (Level 1). I am in the Stylesheet Editor I Advanced View. I can see the attributes under Block which include display, text-align, vertical-align, etc. etc.

I modified the text-align and vertical-align attributes but that does not give the desired result.

Which attibutes do I need to modify so that a bulleted list starts in the left margin (I do not want the first level indented).

[LTinker68]

It's actually the margin-left attribute on the ol and ul tags you'd have to adjust. I guess you could adjust it on the li tag instead, but you'd have to use a negative margin-left value on the li tag, I think. If you modify the ol and ul tags then you could start with margin-left of 0 and work from there. Note, however, that setting the margin-left value on the ol and ul tags can have not-expected results in browsers. For instance, you'd think setting margin-left of 0 would put them at the left margin, but it actually puts them to the left of the left margin because of default behaviors related to HTML lists. I think I set the margin-left to something like 20px to get it close, but it's still not exact between all the browsers (IE, FF, Chrome, etc.) because they all have different default behaviors for HTML lists. It also depends on what you have set for the body tag and html tag, etc.

If you can't get the HTML lists positioned exactly as you want, an alternative would be to create a paragraph class that uses an mc-auto-number-format that contains the bullet icon (•) that you add manually to that field (using ALT + 0149), and a span class that floats the auto-number format to the left of the paragraph. That will give you the greatest control over the placement of the "list" and conformity between the browsers.

[holmesdm]

This project is for internal use only, which is viewable on the company intranet (browser is IE).

Under Properties I Block, do I modify the text-align attribute only or is there another attribute under Properties that needs to be modified (i.e., List I list-style-position)?

[crdmerge]

Use the "Try It Yourself" sections in the W3schools web site: http://www.w3schools.com/css/css_list.asp


Good luck,
Leon