The mysteries of bullet alignment

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
minicyclist
Propeller Head
Posts: 60
Joined: Wed Apr 09, 2014 3:51 pm

The mysteries of bullet alignment

Post by minicyclist »

Hi,

I'm unable to come up with a solution to change the vertical alignment of a bullet image alongside the text in an <li> style.

In Flare my bullets are raised above the text as seen below (note the first bullet is custom image that I've added, and it's in a different <ul> set for testing)
bullets_flare.jpg
The image below shows the printed output. The bullets are just a little too high.
bullets_print.jpg
This is the code:

Code: Select all

<ul class="firstLevel">
       <li>first item in the list</li>
</ul>
<ul style="list-style-type: disc;">
      <li>second item </li>
      <li>third item</li>
</ul>
This is my CSS:

Code: Select all

ul
{
	list-style-type: none;
	font-size: 1em;
	list-style-image: url('../Images/first_bullet.eps');
}

ul.FirstLevel
{
    list-style-type: none;
    list-style-image: url('../Images/BulletTSC.png');
    vertical-align: middle;
}

li
{
	color: #000000;
	orphans: 2;
	widows: 2;
	font-size: 1em;
}

@media print
{
    li
	{
		margin-bottom: 6pt;
		margin-top: 6pt;
		text-align: left;
		orphans: 2;
		widows: 2;
		line-height: 13px;
		font-weight: normal;
		color: #363636;
	}
}

I remember reading somewhere that Flare doesn't align bullets whilst editing, but my printed output isn't aligned and I've tried:

- adding whitespace to the image (it just gets squashed)
- playing around with margin-top and margin-bottom in my <ul> and <li> styles, but this only affects space above and below the <li>
- vertical-align (has no effect)

Grateful for advice,

Ian
You do not have the required permissions to view the files attached to this post.
Mike Kelley
Propeller Head
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

Re: The mysteries of bullet alignment

Post by Mike Kelley »

The two best options I know of for aligning text with custom bullets are:
  • Use background-image instead of list-style-image, and then you can use background-position to adjust positioning of the bullet.
  • Set the line-height of the li to be the same height as the bullet image.
minicyclist
Propeller Head
Posts: 60
Joined: Wed Apr 09, 2014 3:51 pm

Re: The mysteries of bullet alignment

Post by minicyclist »

Thanks Mike.

I seem to have got a workaround using background-image as you suggested. For anyone else that may come across this problem, here's my CSS for <li>:

Code: Select all

li
{
        list-style-type: none;
	color: #000000;
	orphans: 2;
	widows: 2;
	font-size: 1em;
	mc-hyphenate: never;
    
    background-image: url('../Images/BulletTSC.png');
    background-repeat: no-repeat;
    background-position: 0px 5px;
    
    text-indent: 10px;
 
  	
}
Line-height had no effect though.

Thanks,
Ian
jeivers
Jr. Propeller Head
Posts: 5
Joined: Wed Dec 02, 2015 2:04 pm

Re: The mysteries of bullet alignment

Post by jeivers »

For the ul list style:
For printed output you can set the List > list-syle-position to inside, and then set the Block > text-indent to a negative value to move the first line left and the bullets align with text.
You do not have the required permissions to view the files attached to this post.
bianca_writer
Propeller Head
Posts: 54
Joined: Tue Mar 15, 2016 9:57 am
Location: Los Angeles, CA

Re: The mysteries of bullet alignment

Post by bianca_writer »

I'm having the same issue as the first poster. I tried Mike's suggestion to set the bullet image as a background image for the li style. But then, what do you do with numbered lists? The custom bullets will still show up there.

I feel like there should be another way to position the custom bullet using the List group, and not the Background group.
You do not have the required permissions to view the files attached to this post.
Mike Kelley
Propeller Head
Posts: 68
Joined: Fri Aug 22, 2014 12:24 pm

Re: The mysteries of bullet alignment

Post by Mike Kelley »

bianca_writer wrote:I'm having the same issue as the first poster. I tried Mike's suggestion to set the bullet image as a background image for the li style. But then, what do you do with numbered lists? The custom bullets will still show up there.

I feel like there should be another way to position the custom bullet using the List group, and not the Background group.
There's an easy fix for that, Bianca. You can tell the CSS to use the background image for only bulleted lists by using a more specific selector.

Code: Select all

ol li {
    // These rules apply only to list items that are descendants of ordered lists.
}

ul li {
    // These rules apply only to list items that are descendants of unordered lists.
}
bianca_writer
Propeller Head
Posts: 54
Joined: Tue Mar 15, 2016 9:57 am
Location: Los Angeles, CA

Re: The mysteries of bullet alignment

Post by bianca_writer »

Hi Mike!

Thanks for pointing that out. After playing around with many different options, here's what I got to work:

Code: Select all

li
{
	margin-top: 6px;
	margin-bottom: 6px;
}

ol
{
	list-style-position: outside;
	list-style-type: decimal;
	margin-bottom: 0;
	margin-right: 0;
	margin-top: 4px;
	margin-left: .23in;
	text-align: justify;
	text-align-last: left;
	}

ol ol
{
	list-style-type: lower-alpha;
}

ul
{
	margin-left: .20in;
	list-style-image: url('../Images/Bullet.eps');
	display: list-item;
}

ul ol
{
	list-style-type: lower-alpha;
}
ddiemetric
Propeller Head
Posts: 59
Joined: Mon Nov 24, 2008 12:31 pm
Location: Is it Spring yet?

Re: The mysteries of bullet alignment

Post by ddiemetric »

I'm not using images for bullets, I'm using the basic disc and they appear on the text baseline. How do I get them to align with the center of the text?

Thanks.
Zdenek Telicka
Jr. Propeller Head
Posts: 2
Joined: Wed Dec 02, 2009 10:50 am

Re: The mysteries of bullet alignment

Post by Zdenek Telicka »

I have found that I have the same problem. Bullets in the web based output are vertically aligned in the middle, but in the PDF they are at the baseline. We do not have set vertical-align anywhere so I guess it should be in the middle by default (as in the web output it is).
cayennep
Sr. Propeller Head
Posts: 390
Joined: Mon Jul 26, 2010 3:42 pm

Re: The mysteries of bullet alignment

Post by cayennep »

what's the best css way to align bullets (and numbering) flush left, with the text? This seems to be the design trend so have to go along with it :)
AND to be able to see the lists in Flare xml editor.

We have extensive customization from an outside contracting agency, and I want to make sure I provide the right advise on what needs to change. There are too many variables at the minute to test properly so hope some heuristics on this can help!

Specifically, it looks like block = list-item is required in order to get the list counter incrementation working - but I'm not sure if it breaks/changes the flush left, or what else needs to change if using this?

Then the autonumber = inside-head. Again, what impact does this have on the flush left? It may be all that's needed to see lists in the editor.

We're currently using paragraph formats for lists, which I think may also need to change, but these properties should apply whether using <p> or <ul/ol>.

As always, any help/tips greatly appreciated!
Post Reply