you're reading:
Html & inline css codes, Leading, Space betweeen characters, Space betweeen lines, Space betweeen words, Tracking

Formatting text pt. 3: space between lines, characters, and words

http://wpbtips.wordpress.com/

Space between lines (“leading”)

<div style="line-height:1.4em;">
TEXT HERE
</div>

This code may also be needed in conjunction with some other codes, to restore normal line-spacing in case those other codes happen to disrupt it; see “Note on coding” here.

Space between characters (“tracking”)

<span style="letter-spacing:1.2em;">TEXT HERE</span>

Space between words

<span style="word-spacing:2.1em;">TEXT HERE</span>
In all three codes the numbers are just an example: you change them to adjust the amount of space. Also note that “span” is meant for isolated words or phrases within a paragraph; for sections comprising one or more complete paragraphs, use “div” instead.

All the above in the html post or page editor, of course (as well as in text widgets).

Examples

Normal:
The Captain looked at Fermina Daza and saw on her eye-lashes the first glimmer of wintry frost. Then he looked at Florentino Ariza, his invincible power, his intrepid love, and he was overwhelmed by the belated suspicion that it is life, more than death, that has no limits.
“And how long do you think we can keep up this god-damn coming and going?” he asked.
Florentino Ariza had kept his answer ready for fifty-three years, seven months, and eleven days and nights.
“Forever,” he said.

(Ending of Love in the Time of Cholera by G.G. Márquez; transl. Edith Grossman)

Line-height set to 1.2em:
The Captain looked at Fermina Daza and saw on her eye-lashes the first glimmer of wintry frost. Then he looked at Florentino Ariza, his invincible power, his intrepid love, and he was overwhelmed by the belated suspicion that it is life, more than death, that has no limits.
“And how long do you think we can keep up this god-damn coming and going?” he asked.
Florentino Ariza had kept his answer ready for fifty-three years, seven months, and eleven days and nights.
“Forever,” he said.
Line-height set to 2.4em:
The Captain looked at Fermina Daza and saw on her eye-lashes the first glimmer of wintry frost. Then he looked at Florentino Ariza, his invincible power, his intrepid love, and he was overwhelmed by the belated suspicion that it is life, more than death, that has no limits.
“And how long do you think we can keep up this god-damn coming and going?” he asked.
Florentino Ariza had kept his answer ready for fifty-three years, seven months, and eleven days and nights.
“Forever,” he said.
Word-spacing set to 1.4em:
Florentino Ariza had kept his answer ready for fifty-three years, seven months, and eleven days and nights.
“Forever,” he said.
Letter-spacing set to 1.2em:
“Forever,” he said.
http://wpbtips.wordpress.com/

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

33 thoughts on “Formatting text pt. 3: space between lines, characters, and words

  1. “Forever,” he said.

    ≥^,^≤

    Posted by Tess | July 2, 2009, 16:45
  2. One of my favorite book endings. (We had agreed that the examples have to be things I like!)

    Posted by Panos | July 2, 2009, 23:55
  3. Ah, indeed!

    I did wonder where the example was when you first posted this.

    “…that it is life, more than death, that has no limits…”

    I have tried to read that book many times – have truly wanted to read it. I’ve read about 2 or 3 hundred pages (+ or – ? over and over), and of course the ending ( I always read the endings of books, just after reading the beginnings ) but the details between have confounded me.

    Should I try again, do you think? I think I’m missing something, but cannot see (have not seen) what it is. Tell me? no won’t work

    so sorry to impose upon you. I am still having a difficult time.

    But here and now, at any rate, I was referring to just the punctuation.

    pressing submit comment before sounding even more silly…

    Posted by Tess | July 3, 2009, 08:01
  4. Wow! And you said you don’t spot typos?

    I thought your comment was a laconic way of saying you also like that – didn’t even notice the difference in punctuation!

    Oh the details… I had made a chart of key events to keep track…

    The Márquez I hadn’t managed to finish was The Autumn of the Patriarch: each chapter one paragraph, with hardly any full-stops (a.k.a. periods!); a tour de force maybe, but suffocating. Cholera I think is a great book, but I can’t tell you if you should try again. Personally I don’t mind “trying”, provided I find the book engaging; if not, I abandon it (unless it’s related to my field of study).

    “Difficult time” needs time.

    Posted by Panos | July 4, 2009, 11:33
  5. You know what? I’m confusing it with One Hundred Years of Solitude. That was like reading The Brothers Karamazov: could not keep the characters straight who was who when! My daughter recommended Cholera (I think she read it in Spanish!), but I’ve never read it! The Hundred Years put me off trying another Márquez book.

    I did like the quote very much. I googled and saw Márquez, and well, thought too bad that’s over my head.

    I recall reading Romeo and Juliet, must have been a freshman in high school, and swearing that I’d never voluntarily read Shakespeare, ever!!! The language was too difficult! Then I saw some performances (of which plays, I no longer remember) while I was in college and changed my mind.

    There was a Complete Works (or The Plays of?) William Shakespeare up at the cottage, where there was no TV, and daughter, husband, and I would take turns reading aloud. Midsummer Night’s Dream, Taming of the Shrew…

    As for the typo, it was all that space around the comma…
    (wasn’t sure if you still wanted notes about such things, though)
    <3

    Posted by Tess | July 4, 2009, 20:38
  6. Oh, and maybe place the “Space between characters (”tracking”)” code sample after the “Space between words” so they are in the same order as examples of the quote formatting.

    Posted by Tess | July 4, 2009, 20:57
  7. - Confusing Cholera with Solitude? Ah, that explains something that puzzled me: Cholera is 348 pages long, so I wondered why you didn’t finish it if you reached page 300!

    – Karamazovs? No comparison: complicated, but monumental – arguably D’s most important book. (By the way, the famous “without God, everything is permitted”, supposedly from that book, is a mis-quote.)

    – The Cholera ending is even more interesting, because the key-phrase (the years/months/days thing) has been used repeatedly in the course of the story.

    – Willy was of course the first thing that came to mind re “trying”: to me the prime example of texts worth every effort to get in touch with. I find the plays so fascinating, and his use of language so overwhelmingly fantastic, that I never mind how hard I might have to try. Even when I couldn’t understand the meaning, the very taste of the words in my mouth would be enough. Damn Willy makes language jump hoops as if it’s the easiest thing in the world – and he does it all the time! But it’s a different case, since it’s plays, not novels: the natural way is watching them, not reading them.

    – “Wasn’t sure if you still wanted notes about such things”: I like your humor… Why shouldn’t I “still” want that? I’m surprised (and flattered) that you bother to do that, but corrections are always welcome! (Some people cannot stand being corrected; I don’t have that particular problem…)

    – But re your suggestion in the second comment, I have to say no! I had thought about it myself, and I rejected it. I like the increasing emphasis I get the way I have ordered the examples, but I think that letter-spacing is of more use than word-spacing, so I decided to leave it as it is.

    – And you’re not imposing. On the contrary, your comments occasionally give us the chance to discuss matters more interesting than html codes! They make this peculiar blog breathe a bit more like a “normal” blog.

    Posted by Panos | July 4, 2009, 21:56
  8. “- But re your suggestion in the second comment, I have to say no! I had thought about it myself, and I rejected it. I like the increasing emphasis I get the way I have ordered the examples, but I think that letter-spacing is of more use than word-spacing, so I decided to leave it as it is.”

    No. No, I did not mean you should change your elegant examples. Absolutely not! NO!
    (I’ve even used your letter spacing code and it really does look great! – http://1tess.wordpress.com/2009/05/31/forever-is-composed-of-nows/#top – (look soon: I’m working on changing this link)

    No, I meant you should change the order of your HTML SAMPLE CODES to correspond with the order of your examples:
    “Space between characters (”tracking”)”
    should be under:
    “Space between words”

    And what do you mean, “more interesting than html codes”??!! (you have taught me much.) Remember I am writing about cooking. How more boring is that? OK so me not intimidated and not imposing? I’ve already told you how much I love your conversation? I’ve gotten a copy of LitToC and we’ll see if I can read it, hmm?

    best to you

    Posted by Tess | July 7, 2009, 05:38
  9. Your tips saved the day. Now I have space between paragraphs.
    Thanks!

    Posted by Anonymous | June 17, 2010, 22:28
  10. Oops, didn’t mean to be anonymous earlier. I’ve been struggling with trying to create space between paragraphs on my WP blog and this really helped. Good karma headed your way.

    [Username link removed - P.]

    Posted by S.A. | June 17, 2010, 22:30
  11. The following code can be used to put in a line break in WordPress posts

    Put one of the following codes inbetween the arrow brackets (above , and .)
    br class=”spacer_” /
    br class=”spacer” /

    It can be seen to work in the post at

    http://www.protectionist.net/2011/01/26/australia-day-2011/

    – look at the page’s source code, just above the word “References”

    Posted by APP | January 28, 2011, 17:44
  12. Thanks, but this post is about line-height, not blank lines. Relevant post is this:

    http://wpbtips.wordpress.com/2009/06/10/formatting-text-pt-1/

    The solutions I’m giving in that post have the advantage of being adjustable (your spacer is correct, but its height is fixed).

    Posted by Panos | January 29, 2011, 12:25
  13. Hi I have managed to edit the line space but after saving the draft and previewing, the line space looks the same as before. Can anyone help me? Thanks!

    Posted by myhiddenkitchen | July 22, 2011, 11:55
  14. More specifics please. Plus which blog are you talking about? The one linked to your username is empty.

    Posted by Panos | July 23, 2011, 04:46
  15. Hi Panos,

    I have not published my blog yet. I am trying to minimise space between the lines within a paragraph. This is the code I used in html editor and when I save the draft and view in visual editor, the result is correct, is what I’m after but when I click preview post it does not show the same result. However the space between the lines does not seem to change from before. Hope this make it clearer for you. I’m trying to get all these amendments right before I start to publish. If you could help, that’s great! Thanks!

    Posted by myhiddenkitchen | July 23, 2011, 11:49
  16. I can’t help if I can’t see the problem. If you can’t show me a published post, then tell me which theme you’re using and show me what code you’re trying to use – see here how (point 4):

    http://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | July 23, 2011, 12:52
  17. I’ve published a post http://myhiddenkitchen.wordpress.com/ the code i used to adjust the font style, size and line height was
    don’t know why the code did not show up on my earlier post. The theme I’m using is twenty ten. Like i mentioned before when the amendment was shown in my visual editor & html editor but not when I preview and publish.
    Thanks for your help! Tell me where I’ve gone wrong with the amendment of the line height.

    Posted by myhiddenkitchen | July 24, 2011, 04:33
  18. You should consult these articles too:

    http://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/

    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    You’ve written each and every paragraph like that:

    <span style="font-family:helvetica;font-size:small;line-height:1em;">PARAGRAPH HERE</span>

    • “Helvetica” is a font that both Macs and PCs have, but in many cases the font-family names aren’t the same, so to make sure you get to both worlds it’s best to write double font-family names.
    • “Small” is ok in your case but a) it’s a rough indication, b) depending on the CSS of the theme, this type of specifying the size may produce unpredictable or no results. The best and most minutely adjustable way to indicate the desired font size is a percentage.
    • The span tag is for isolated words or phrases inside a paragraph. Line-height refers to the distance between the lines of one or more paragraphs, so it has no effect in a span tag.
    • When you want to change a complete paragraph, you don’t use the span tag, you use the p tag. And when you want to change a complete post, you don’t even use that for each paragraph (because you’re needlessly giving the browser the same commands over and over again): you take care of the whole thing by using one div tag.

    So, in all, your code should be this:

    <div style="font-family:Arial,Helvetica;font-size:80%;line-height:1.1em;">
    COMPLETE CONTENT HERE
    </div>

    Posted by Panos | July 24, 2011, 09:32
  19. It’s clearer to me now. Made the adjustments and it worked! Thanks so much!

    Posted by myhiddenkitchen | July 24, 2011, 13:54
  20. Sorry 1 more question. How do I now make the spacing between the paragraphs more prominent?

    Posted by myhiddenkitchen | July 24, 2011, 14:12
  21. You lost the paragraph spacing because you applied the code I suggested to every paragraph instead of the whole post. “COMPLETE CONTENT HERE” in my previous reply means the whole content of the post, not the content of one paragraph. In other words, you put this once at the very beginning of the post:
    <div style="font-family:Arial,Helvetica;font-size:80%;line-height:1.1em;">
    and this once at the very end:
    </div>
    Then you make your paragraph breaks the normal way (hitting return once in the visual editor or twice in the HTML editor).
    You can also do it it the other way round: write everything normally, then apply the div tags at the beginning and the end of the post after you’ve finished with everything else.

    Posted by Panos | July 24, 2011, 14:55
  22. Oh dear, silly of me. Thanks for your patience and guidance. I need to ask 1 last question. How do I change the widget fonts? The fonts for my “recent posts” and other widgets are not Arial and I would like to keep them uniform.

    Posted by myhiddenkitchen | July 25, 2011, 04:00
  23. Ok I assure you this will be my last question. Can I still change the color of the font to my post tittle? I’ve tried searching on google but have found no answer. Thank you again for all yr help with my silly queries.

    Posted by myhiddenkitchen | July 25, 2011, 04:15
  24. You’re welcome, your questions aren’t silly, and my tagline says “tips and advice on wp.com blogs” so I should have no problem with questions!

    Unfortunately you cannot change the font of your widgets (except text widgets, of course) or the color of your titles without the paid Custom Design upgrade.

    If the fonts are of great importance to you, you could perhaps switch to a different theme. See this post of mine that lists the fonts for the most important items (keep in mind that Arial and Helvetica are the same thing, and Helvetica Neue is almost identical):

    http://wpbtips.wordpress.com/2010/09/07/theme-fonts/

    Posted by Panos | July 25, 2011, 04:46
  25. Thanks for the info. In the meantime I’ll think about it. Thanks for all your help once again!

    Posted by myhiddenkitchen | July 25, 2011, 08:02
  26. I don’t understand exactly what to do to make my processor leave a space between each letter. Suddenly and for no apparent reason all the lettters are squashed together. I need very simple and step by step instructions. Can you help?

    E. Wells

    Posted by E. Wells | August 14, 2011, 18:08
  27. Probably, but not if I can’t see the problem. Link to the blog/post in question please.

    Posted by Panos | August 14, 2011, 18:12
  28. Hi Panos,

    My blog is farmboxdays. I’ve been posting erratically, to see how it goes, but now want to step it up a bit. So I need to sort out some appearance issues. And I can’t seem to manage it. Your advice to myhiddenkitchen was close, but didn’t quite work for me.

    Here’s what I’d like to sort:

    In each post, I’d like to have a list of all the contents in my farm box. 1a) Can I have this in a separate column? 1b) Can I reduce the leading between the lines/each separate veg? I do still want to keep the space as is between paragraphs, just not for my list.

    I have 2 kinds of recipe entries. A traditional recipe with a separate ingredient list, and a running recipe with ingredients listed in with the text. For the traditional recipes, sort of same problem as above. I’d like single line spacing between each line of the ingredients. 2) How do I do this?

    3) I have a Recipe page, divided into 4 sub pages. On this page I’d like a list of all the recipe titles only and readers can click on the title they’re interested in and get taken to its page. How do I do that?

    4) I’d also like readers to be able to find recipes by ingredient. What is the best way to do this? By tags? By another type of Ingredient page?

    It may be that there is a better theme for the sort of thing I want to do, so please feel free to suggest this. I started with WuWei, but wasn’t sure.

    Many many thanks.

    Posted by farmboxdays | September 18, 2011, 19:31
  29. Hi,

    1. That’s not clear to me. What does “a list of all the contents in my farm box” mean? Please give me a concrete example and then I’ll tell you about columns and leading.

    2. You mean line breaks instead of paragraph breaks? If you work in the Visual editor, for a line break you press shift-return.

    3. Again I’m not sure what you mean (especially since three of the four subpages are still empty). I guess you mean a list like this:
    – Parsnip & Apple Soup with Ginger
    – Oven-roasted Brussels Sprouts
    etc., continuing with the recipes you’ll add on the rest of the subpages. Right?
    And when you click on a title, you want to be taken just to the page that includes that recipe, or to the exact point where that recipe starts?

    But first see (5) below – you may need to reconsider the whole thing before creating such a list.

    4. Oh that’s complicated… A separate page might be neat, but you’ll have to update it manually all the time. Tags or categories, on the contrary, have the advantage that the respective widgets will update automatically. But categories should be the broad subgroups of your posts, so I don’t think an array of ingredients as categories below each post would look reasonable. So I think I’d vote for tags. But not in association with the Tag Cloud widget: it has a weird appearance, and only displays up to 45 tags. You’ll need to create a custom menu. More details on this after you tell me if you’d like the list of ingredients in your sidebar or as dropdowns in your top nav menu.

    (5.) But static pages (such as your “Winter”) cannot be tagged – only posts can. I don’t see why you’ve published some recipes as posts and some as pages.

    (6.) Also, Duster doesn’t display the sidebar when you view a single post: I think a theme with a permanent sidebar would be more useful.

    Posted by Panos | September 19, 2011, 01:18
  30. You are an amazing person. Thanks so much.

    Line spacing issue resolved, so number 2 sorted.

    Switched theme to Pilcrow, since quite a few food blogs seem to like this one. Assuming it can support the sidebar issue you mentioned?

    Other issues repeat your numbers, above:

    1. “a list of all the contents in my farm box” –have a look at the entry for Early May, I did one there

    4. Yes, it is complicated. Glad you think so too. Have a look at this:

    http://www.jamesramsden.com/recipes-2/

    That’s the sort of thing I’m after. How does he do it?

    5. Not wedded to the Static Page concept, just fumbling around trying to make this do what I want. Which explains why some pages empty, just fiddling right now.

    I don’t want the list of ingredients as a sidebar, now that I’ve tightened up the leading, I’m happy. The sidebar issue relates to the “contents of my farmbox” issue.

    New question which arises: If Pilcrow the right theme for what I want it to do, how do I get the sub-header back up under the header? Important that it says “Farmboxdays: What I get in my weekly farm box and how I cook it” right up top.

    Eternally grateful…..

    Posted by farmboxdays | September 19, 2011, 11:13
  31. So, I can see the list in your “Early May” post. How would you like it to be? Or are you ok with it as it is now? (And why are you talking about the sidebar in connection with these lists? If you want such lists in each post, they must be part of the content of the post – the sidebar doesn’t change from post to post.)

    In WP parlance, your “sub-header” text is your tagline. As you probably noticed, in Pilcrow it’s displayed in the footer, so if you need it near the title of the blog, you must forget that theme too. Here’s which themes display the tagline:

    http://wpbtips.wordpress.com/2009/08/02/tagline/

    Combine it with which themes support a header image, which I guess you prefer:

    http://wpbtips.wordpress.com/2009/03/24/header-images/

    By the way, in my opinion you should select a theme based on whether you like its appearance and whether you think its style fits your subject matter, not on how many similar blogs use it. You can see all themes in action here:

    http://theme.wordpress.com/themes/

    Note that in many themes you can change the background color.

    The page you linked to is an ordinary static page like your “Other Websites” page, only the items on it are links to the blogger’s posts. Assuming that’s what you want to do, and you don’t know how to create links: first you click on the title of each post and copy its URL (its complete address) from the address bar of your browser; then you type the title of the post in the page editor, highlight it, click the Link tool, paste the URL of the post, click Add Link. See here too:

    http://en.support.wordpress.com/links/

    You can make this faster if you use two browser windows simultaneously: one for your actual blog and one for your page editor.

    Posted by Panos | September 19, 2011, 13:39
  32. Please help me !! The actual site on which I am working – http://www.rexnordindia.in is under construction, so I m providing you the link of my another site – http://latestpricelistindia.in/wp-content/uploads/2011/11/Sample.jpg I want the content alignment as shown in the link. I have tried P-tag but no avail. Help me !!!!

    Posted by Parag | November 21, 2011, 07:41
  33. The general idea is that you need table coding. But sorry, as my tagline and my comment guidelines say, my blog is about wordrpress.com blogs: I don’t help with self-hosted sites.

    Posted by Panos | November 21, 2011, 13:28

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,548,088 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: