text spacing..read to understand

Discuss news styles, css code, and other Coranto customizations in here...the possibilities are endless, so have at it!

Moderator: Spunkmeyer

text spacing..read to understand

Postby Gcampos » Sat Feb 11, 2006 3:24 am

I use coranto for event scheduling. When entering the subject (city), it is spaced out, like so: C O R A N T O

If there is a two word city name there is a double space inbetween the two words. But this isnt happening right now. If i try to add more spaces, it reverts as though it were one word.

Right now i have three spaces inbetween words, but still wont work correctly, if i enter a character like a hyphen, have no problem.

Just noticed when doing the same in news text box, i get the same result.
take a look:
http://www.californiabullfights.org/news/index-test.shtml

Gerry
Gcampos
 
Posts: 31
Joined: Tue Jan 23, 2007 9:06 pm
Location: So Cal

Postby Dale Ray » Sat Feb 11, 2006 4:15 am

This is not a Coranto problem.

When html is processed by the browser for display extra white space is stripped out. So if you want to add extra space between letters put this in the head section of your page:
Code: Select all
<style type="text/css">
span.wide {
   letter-spacing: .2em;
    }
</style>


and then use

Code: Select all
<span class="wide">CROWS LANDING</span>


adjust the value to make the spacing wider or narrower. You could add the other properties to the style like this:
Code: Select all
span.wide {
   letter-spacing: .3em;
    font: Arial;
    font-weight: bold;
   font-size: 140%;
    }
</style>

Adjust the values as needed to get the look you want. This will eliminate the font tags for these items.
Dale Ray
User avatar
Dale Ray
 
Posts: 1001
Joined: Sun Jan 19, 2003 6:02 pm
Location: NW Indiana

Postby Gcampos » Sat Feb 11, 2006 4:26 am

Dale Ray wrote:This is not a Coranto problem.

When html is processed by the browser for display extra white space is stripped out. So if you want to add extra space between letters put this in the head section of your page:
Code: Select all
<style type="text/css">
span.wide {
   letter-spacing: .2em;
    }
</style>


and then use

Code: Select all
<span class="wide">CROWS LANDING</span>


adjust the value to make the spacing wider or narrower. You could add the other properties to the style like this:
Code: Select all
span.wide {
   letter-spacing: .3em;
    font: Arial;
    font-weight: bold;
   font-size: 140%;
    }
</style>

Adjust the values as needed to get the look you want. This will eliminate the font tags for these items.


Sounds like you mean the subject is html, everything is coranto. so do i enter the above in edit styles? and how.

Gerry
Gcampos
 
Posts: 31
Joined: Tue Jan 23, 2007 9:06 pm
Location: So Cal

Postby Dale Ray » Sat Feb 11, 2006 2:02 pm

gcampos wrote:Sounds like you mean the subject is html, everything is coranto. so do i enter the above in edit styles? and how.

Gerry

AS I said in my first post this has nothing to do with Coranto. Coranto is a tool that helps you edit content and create pages for your your visitors to view. It is up to you to make sure that the pages are well-formed (correct) HTML, XHTML, or whatever other type of document you want to present. Here is the framework of a basic page in HTML (Version 4.01)
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Your Page Title Here</title>
</style>
</head>
<body>

</body>
</html>

If you view the source code of the sample you linked to in your first post you will see that there is no doctype declaration. You can see the other html errors HERE.

If you look at the SOURCE CODE of your page. (In Internet Explorer right click on the page and select VIEW SOURCE) You will see that the spaces you entered are in fact there. When an HTML page is displayed white space (extra spaces, line feeds, etc.) is not displayed. This is the intended behavior, nothing is wrong.

If you want to introduce white space as a formatting or display tool you have to tell the browser that you want to change this behavior. You can enclose the section you want the white space preserved in <pre></pre> tags which preserves all formatting for that section.

Or you can use Cascading Style Sheets (CSS) to tell the browser how you want that section presented. That is the solution I proposed in my first answer.

Since you sample page has an extension of .shtml I am assuming that you are including the Coranto edited content into another page. The CSS style should go between the <head></head> tags in that page.
Code: Select all
<head>
   <title>Your Page Title Here</title>
<style type="text/css">
span.wide {
   letter-spacing: .2em;
    }
</head>

Then in your Coranto style where you are including the field you will have something that looks like this:
Code: Select all
<span class="wide"><Field: YourField></span>

When the file created by Coranto is included into the shtml page by the server the user's browser will apply the style rule from the head section on each item. By changing the .2em value to a higher one, .4em for example, you can make the spacing larger.
Dale Ray
User avatar
Dale Ray
 
Posts: 1001
Joined: Sun Jan 19, 2003 6:02 pm
Location: NW Indiana


Return to Customization

Who is online

Users browsing this forum: No registered users and 1 guest

cron