Bruceee's Sandpit
Web Design with SiteSpinner
Web Design with SiteSpinner
home
home
home
site map
site map
site map
This page discusses the reasons for text spacing to not meet your expectations, and what you can do about it. Your text may be beautifully aligned in one browser with images nicely interspersed, but can look bad in another browser or computer. Objects can overlap, or gaps may be too big. There are two main reasons:
- You have not allowed for inherent differences in line spacing between browsers
- You have not used a web-safe font (another page)
- Allowing for for inherent differences in line spacing between browsers
- Using CSS to control line height
- Using the auto-scroll text box
- Placing a long page in an i-frame
- Comparison: auto-scroll text object and i-frame
- Bullets in text
- Size and scale of single text lines
Inherent differences in line spacing between browsers
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. One work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
For the last three options, visitors view the full text with scroll bars (normally only vertical). Because these objects contain only text, there are no other objects to get in the way. Then, although there are still differences in line spacing, nobody will notice.
In terms of line spacing, Netscape and FireFox are the same as the SiteSpinner workpage. IE6 and Opera are slightly more closely spaced -- at least in the font and size I normally use -- Arial 12pt
When designing your page, butt the top and bottom boundaries of text objects almost together. That spacing is how your page will look in Netscape and FireFox. In IE6 and Opera the gap between objects will be too large. I have deliberately made this text object larger than I normally would -- you will see a big gap in IE6 and Opera.
Click the links below to show the line spacing grid for some common browsers. The grid is over the paragraphs comprising this section.
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. One work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
For the last three options, visitors view the full text with scroll bars (normally only vertical). Because these objects contain only text, there are no other objects to get in the way. Then, although there are still differences in line spacing, nobody will notice.
In terms of line spacing, Netscape and FireFox are the same as the SiteSpinner workpage. IE6 and Opera are slightly more closely spaced -- at least in the font and size I normally use -- Arial 12pt
When designing your page, butt the top and bottom boundaries of text objects almost together. That spacing is how your page will look in Netscape and FireFox. In IE6 and Opera the gap between objects will be too large. I have deliberately made this text object larger than I normally would -- you will see a big gap in IE6 and Opera.
Click the links below to show the line spacing grid for some common browsers. The grid is over the paragraphs comprising this section.
19 pixels/line
18 pixels/line
Click the links to see the effect on this page. These links do not work with Opera, but who cares? 
Notice that at either 18 or 19px spacing, the IE6 line spacing and the Netscape/Firefox line spacing now match.
You can achieve this effect on your pages by entering this CSS code object:
Notice that at either 18 or 19px spacing, the IE6 line spacing and the Netscape/Firefox line spacing now match. You can achieve this effect on your pages by entering this CSS code object:
<style type="text/css">
.fsx05 {line-height:19px}
</style>
.fsx05 {line-height:19px}
</style>
The line of code matches the font I have used here. (Arial 12pt) If you use a different font or size you may need to adjust the font class, the .fsx05, and the height 19px to match your body text. To find out what class you are using, use the code inspector to view the code for your text -- you should find an html tag like this <font face="Arial" class="fsx05">.
With that little CSS, you can have large text objects on page and not worry about the alignment with respect to other objects. What you see on your workpage is what you will get in all the big four browsers. Yes even Opera -- it's just my javascript that does not work with that.
This is a big advance, and I'm going to use it all the time.
With that little CSS, you can have large text objects on page and not worry about the alignment with respect to other objects. What you see on your workpage is what you will get in all the big four browsers. Yes even Opera -- it's just my javascript that does not work with that.
This is a big advance, and I'm going to use it all the time.
Auto scroll text box
At the top right of the text editor is a toolbar icon labelled 'Auto-Scroll Text Box'. For an auto scroll text box select that icon. Notice that the icon in the selected state is quite similar to the unselected state. There is also a main menu option under the Format command.
This text box looks no different on your workpage to any other text box. However, when you preview or publish, the box will show a vertical scroll bar if there is too much text to display inside the text box boundaries you have specified. You won't normally get a horizontal scroll bar, because word-wrap will break lines at word boundaries. However if you have a long word, too long for one line, you will see a horizontal scroll bar too.
Below are some examples of auto-scroll text boxes:
At the top right of the text editor is a toolbar icon labelled 'Auto-Scroll Text Box'. For an auto scroll text box select that icon. Notice that the icon in the selected state is quite similar to the unselected state. There is also a main menu option under the Format command.
This text box looks no different on your workpage to any other text box. However, when you preview or publish, the box will show a vertical scroll bar if there is too much text to display inside the text box boundaries you have specified. You won't normally get a horizontal scroll bar, because word-wrap will break lines at word boundaries. However if you have a long word, too long for one line, you will see a horizontal scroll bar too.
Below are some examples of auto-scroll text boxes:
Auto-scroll
unselected
unselected
Selected
Inherent differences in line spacing
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
Inherent differences in line spacing
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
Text without a border
A 1-pixel border around the text object, made with the Quick Editor
Inherent differences in line spacing
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
The line spacing inside text objects may be greater in workpage mode than it is in preview mode. This causes problems with exact alignment - what you see in workpage mode is not what you get when you preview. This will vary depending on the browser you are using for preview.
Line spacing differences are a fact of life with browsers. It's not a bug in SiteSpinner, it's just the way browsers are. The only work-around is to disguise things so that the differences don't accumulate in a visible fashion. Here are some disguises:
1. Split the text up into separate text objects of about 20 lines each. Make the break between sections or paragraphs. There are still line spacing differences, but they are swamped by the gaps between text objects. (This will be unsatisfactory if you have a long list and want an even gap between each item in the list. In the top half this page,) I have put borders around my text objects so you can see where I have made the breaks.
2. Put the text in one long object, and have no objects below it -- not even navigation bars. This is so easy to do, I won't even give you an example.
3. Use an auto-scroll text box. Depress the icon on the top right of the Text Editor toolbar.
4. Put your long text object on its own page and put that page in an i-frame.
No border on the text object, but a shaded rectangle with a border placed behind
If you use a rectangle like I did in the last example, set anti-alias and re-render off. This avoids creating an image file for the rectangle.
Place the rectangle behind the text box -- the icons are on the bottom tool bar. Place 3 edges of the rectangle almost exactly under the edges of the text box. Extend the remaining left hand edge to give the left hand margin you want.
Experiment to get the exact effect you want -- it varies slightly between different browsers.
If there are links in the text box, they operate just like they do on a standard text box. There are two bookmarks in each of the examples -- give them a test.
Place the rectangle behind the text box -- the icons are on the bottom tool bar. Place 3 edges of the rectangle almost exactly under the edges of the text box. Extend the remaining left hand edge to give the left hand margin you want.
Experiment to get the exact effect you want -- it varies slightly between different browsers.
If there are links in the text box, they operate just like they do on a standard text box. There are two bookmarks in each of the examples -- give them a test.
Long page in an i-frame
The effect achieved above with text objects can be duplicated with i-frames. Here are further examples. The links in the i-frames don't work -- the text is just a copy of some text above.
The effect achieved above with text objects can be duplicated with i-frames. Here are further examples. The links in the i-frames don't work -- the text is just a copy of some text above.
I-frame without a border
I-frame with border (visible control)
No border on the i-frame, but a shaded rectangle with a border placed behind
The i-frame approach involves another page which holds the source data to be displayed (the 'source' page) in the i-frame. Mine is named "iFrameText". Here is that source page without the i-frame. There is only text on the page, no navigation or banners. Also the text starts at the top left corner of the page -- you could put CSS positioning off -- Object Editor > Transformations tab
This approach has merit for a simple blog. However for that to be effective, we need a way to make the i-frame automatically resize to match the length of the text object. Also we need a way that visitors can add comments to entries. Both of those topics are in the future.
This approach has merit for a simple blog. However for that to be effective, we need a way to make the i-frame automatically resize to match the length of the text object. Also we need a way that visitors can add comments to entries. Both of those topics are in the future.
Comparison: auto-scroll text object and i-frame
Compared to the auto-scroll text object, the i-frame has these differences:
An i-frame is more complex, but it does give other options that you may prefer. You can have graphics. But not buried in the text -- we are using i-frames here to avoid spoiling the text line spacing!
Linking in i-frames is different. Clicking on a normal link inside an i-frame source page will set another source page in the i-frame. (A normal link is one not opening in a new window.) The i-frame examples above contain bookmarks back to this page. On these examples, Firefox and Netscape are inconsistent. The first click in the frame changes the main page. After you use the back button, the links work as expected. Contrast with a text box where links change the content of the main page.
Compared to the auto-scroll text object, the i-frame has these differences:
- You should adjust the width of the i-frame to avoid a horizontal scrollbar (automatic with the auto-scroll text object)
- You can adjust the color of the box from the source page
- You can control the margins better by positioning the text object in the source page. My text object is at top left of the source page, but it could positioned slightly further right to give a bigger left-hand margin.
- You can include images in source pages, but keep them out of the text.
- Any links change the source page displayed in the i-frame page rather than the main page.
An i-frame is more complex, but it does give other options that you may prefer. You can have graphics. But not buried in the text -- we are using i-frames here to avoid spoiling the text line spacing!
Linking in i-frames is different. Clicking on a normal link inside an i-frame source page will set another source page in the i-frame. (A normal link is one not opening in a new window.) The i-frame examples above contain bookmarks back to this page. On these examples, Firefox and Netscape are inconsistent. The first click in the frame changes the main page. After you use the back button, the links work as expected. Contrast with a text box where links change the content of the main page.
Bullets in text
Bulleted text deviates somewhat from WYSIWYG. There is some deviation due to a bug in SiteSpinner, (V2.50f) and there is more deviation due to differences in browsers. To be really sure about the spacing between bulleted text objects, preview rather than rely on the workpage appearance.
You can reduce the effect of these issues with the following techniques:
Bulleted text deviates somewhat from WYSIWYG. There is some deviation due to a bug in SiteSpinner, (V2.50f) and there is more deviation due to differences in browsers. To be really sure about the spacing between bulleted text objects, preview rather than rely on the workpage appearance.
You can reduce the effect of these issues with the following techniques:
- Don't add any blank lines before or after bulleted text -- browsers will take care of this
- Don't start bulleted text as the first entry in a text object
- Change the spacing browsers put around bulleted lists with this CSS code object:
<style type="text/css">
ul{margin-top:3px; margin-bottom:3px}
li{margin-top:3px; margin-bottom:0px}
</style>
ul{margin-top:3px; margin-bottom:3px}
li{margin-top:3px; margin-bottom:0px}
</style>
This code gives much tighter control over bulleted lists, and does not rely on the whims of the various browsers. This means that the lists should reproduce with the same spacing in all browsers. Famous last words 
There are four margins you can change:
The disadvantage of this approach is that the workpage view of the bulleted list will deviate even more from the previewed/published view -- but with a little practice you get to know how to set it up on your workpage.
See also other ways of making bullets.
There are four margins you can change:
- margins above and below the list as a whole (the ul, unordered list, part)
- margins above and below each list item (the li, list item, part)
The disadvantage of this approach is that the workpage view of the bulleted list will deviate even more from the previewed/published view -- but with a little practice you get to know how to set it up on your workpage.
See also other ways of making bullets.
Single text lines
When you have a single line of text, it has a natural height. For example, in IE6, the natural height of text in this font, Arial 12pt, is 23 pixels. This means that when you edit a single text line, it reverts to 23 pixels -- forgetting whatever other height value you might have set. This may not be what you want
Scaling a single text line
You can avoid this by scaling the text object, rather than setting its height..The scale does not change the size of the font, rather it just changes the size of the bounding box of the text object. So let the text line flop to its desired height, say 23 pixels, then set the scale factor from the Quick Editor > Object tab. Or if you hold down the ALT key while you drag an edge, you can scale that way too.
When you have a single line of text, it has a natural height. For example, in IE6, the natural height of text in this font, Arial 12pt, is 23 pixels. This means that when you edit a single text line, it reverts to 23 pixels -- forgetting whatever other height value you might have set. This may not be what you want
Scaling a single text line
You can avoid this by scaling the text object, rather than setting its height..The scale does not change the size of the font, rather it just changes the size of the bounding box of the text object. So let the text line flop to its desired height, say 23 pixels, then set the scale factor from the Quick Editor > Object tab. Or if you hold down the ALT key while you drag an edge, you can scale that way too.
Auto-scroll a single text line
If you activate the box for a single line, the text object will remember your previous height setting after an edit. Obviously you have to be careful with the minimum height you set -- otherwise you will get a scroll bar appear, which looks strange for a single line.
For this size font, in the examples below, the scroll bar appears at 17 pixels on IE6, so the minimum height you should set is 18 pixels. It may vary slightly depending on the browser and the exact text on your line. If you use this technique, check the result in other browsers too.
If you activate the box for a single line, the text object will remember your previous height setting after an edit. Obviously you have to be careful with the minimum height you set -- otherwise you will get a scroll bar appear, which looks strange for a single line.
For this size font, in the examples below, the scroll bar appears at 17 pixels on IE6, so the minimum height you should set is 18 pixels. It may vary slightly depending on the browser and the exact text on your line. If you use this technique, check the result in other browsers too.
23 pixels, the default
18 pixels, the minimum
17 pixels, ooops scrollbar!
Line height in IE6 where scroll bars become visible (other browsers may be different)
You can apply the same techniques, scaling and auto-scroll, to to multi-line text objects.