I am trying to use a graphic as a bullet point before a couple of words, add a couple of forced spaces than repeat with a new bullet point and group of text. The issue is that the graphic on some of the lines separates from the first word of the group of text. What I would prefer is to keep the bullet point and the couple of words in its group together on the same line or all move to the next line.
How would I force a group of words with an inline graphic bullet point from breaking up on separate lines?
How would I force a group of words with an inline graphic bullet
point from breaking up on separate lines?
One way to do this is to use a span style to attach the graphic to the
first letter of the first word and the last letter of the last word.
That will keep it all together no matter what.
Not familiar with the span style. do you have an example or a
reference I could go to.
When you apply a style to a word or run of text (not an element) FW
creates a style like this:
Ruby on <span class="red">Rails</span>
All you’re doing is creating and applying the style, FW does the rest.
So, I would create 2 class styles, one for each bullet, eg, “open” and
“close” (without quotes). In each one use the bullet graphic as a
background image and you can adjust the spacing and such with padding.
Apply the “open” style to the first letter of the first word and the
“close” style to the last letter of the last word. I do it all the
time for quotation marks when I want to use a more dramatic font than
the rest of the text.
I did something similar just last night. Here are the steps:
Create a new style and click the extended button.
In the dialog that appears click New.
In the dialog that appears add:
“white-space” (without quotes) to the Name field
“nowrap” (without quotes) to the Value field
Click Ok until you get back to the New Style dialog and set the Name as “nowrap” (or something else meaningful)
Click Ok
Select the bullet, the two spaces (remember HTML only supports one space, any more than this need to be forced with Option-space) and the first word (or however many words you want to force not to wrap to a new line)
Click on the new style in the Styles palette or Styles Inspector
Hope this helps,
Joe
On 23 Nov 2010, at 05:39, TeamSDA wrote:
What is happening is the bullet point ends up in the upper left corner behind the character I applied it to.
I see how to apply the graphic in the styles panel but where do I do
the padding?
Perhaps Joe’s method is easier, but to answer your question:
Open the main Styles window and hit the Extended button and add:
Name: padding
Value: 0 6px (or whatever you want)
You can also position the graphic in a similar way:
Name: background-position
Value: 0 3px (or whatever you want)
The CSS above is general, it could be written differently to target
just the left padding for example or just the vertical position of the
graphic. It’s up to you how to write it.