www.webdeveloper.com
Results 1 to 5 of 5

Thread: Sentence / Word / Letter Spacing

Hybrid View

  1. #1
    Join Date
    Dec 2005
    Posts
    492

    Sentence / Word / Letter Spacing

    How do I make every sentence in a paragraph 100% width of the container div?

    I want for my paragraphs and other sentences to all be a fixed, squared off width.

    So that ...

    Hi, this is a sentence.

    is as wide as ...

    Hi, this is sentences is slightly longer.

    Further more, is there a way to cleanly balance the shift in word-spacing vs. letter spacing?

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,222
    text-align: justify;
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,208
    You also can control word and letter spacing if needed:

    p.spread { word-spacing: 0.5em; }

    <p class="spread">The spaces between words in this paragraph are increased by 0.5em.</p>

    p.spacious { letter-spacing: 0.25em; }

    Use with caution. Especially for other languages.

    **************

    <p class="spacious">The letters in this paragraph are spread out somewhat.</p>

    To set letter-spacing that's in proportion to font size, you must set it explicitly.

    Ron

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    don't forget:

    p {text-indent:value; line-height:value; margin:value}

    whereby text-indent is self-explainatory, "line-height" is the height between 'lines of sentence' in the paragraph, and "margin" is the distance between seperated paragraphs.

    line-height, probably best valued at "em" (1.1em, 1.2m, 1.3em, etc..)
    margin, most likely best at "px" (6px 0 6px 0, etc)

    A first-line pseudo :

    <style type="text/css">
    p:first-line {color: blue;font-variant: small-caps}
    </style>

    makes the FIRST line of a multi-line paragraph,
    in this case, be the color "blue" or whatever you want.

    and first-letter pseudo :

    p:first-letter {color:red; font-size:xx-large}

    Makes the first letter, HUGE (and red, in this case)

    ...you can have a LOT of fun with these.
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Dec 2005
    Posts
    492
    Cool! Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles