you're reading:
Alignment, Blockquotes, Html & inline css codes, Hyphenation, Indenting

Formatting text pt. 2: indents and blockquotes

http://wpbtips.wordpress.com/

Multiple spaces

Pressing the space bar repeatedly won’t do; you need the html code for a space (in the html post or page editor, of course):

 

This can be used several times in a row, with or without a regular space after each repetition.

But watch out: in the post or page editor this code snippet may be stripped out if you switch back from html to visual, so it’s only safe in text widgets (or title boxes). For posts or pages, you can use coding for invisible characters instead:

<span style="visibility: hidden;">+++</span>

Use as many crosses —or any other character— you need in each case.

Single line indents

<span style="margin-left:28px;">FIRST WORD HERE</span>

Change the number to adjust the amount of indentation.

First line indents

<div style="text-indent:23px;">
TEXT HERE
</div>

Change the number to adjust the amount of indentation.

Enclosing the text in this code will affect all paragraphs, provided there’s a full paragraph break (i.e. blank line) after each one. If you prefer the “traditional” book look (line break but no blank line), you’ll have to apply the code to each separate paragraph – or use the “single line indent” solution instead.

Hanging indents

Hanging indentation means indenting all lines of a paragraph except the first; it’s the standard layout for bibliographies.

<div style="margin-left:34px;text-indent:-34px;">
TEXT HERE
</div>

To adjust the amount of indentation, you replace both instances of the number with a smaller or larger one.

Again, the code will only affect all enclosed paragraphs if they’re separated by blank lines, otherwise you must apply it to each separate paragraph.

Full indents

To indent all lines of one or more paragraphs, you use the code for padding:

<div style="padding-left:25px;">
TEXT HERE
</div>

Or you can use margin-left instead of padding-left. Again you can change the number etc.

Blockquotes

The code is this:

<blockquote>
TEXT HERE
</blockquote>

You don’t even have to type or copy-paste it: you can simply highlight the text and click the blockquote button (unless, like me, you prepare your posts outside the wp editor).

However, in some themes blockquotes are graced with all sorts of decorative frills, which you may or may not like. If you don’t, you can have plain-looking blockquotes by using the padding code again, in this case for both sides of the text:

<div style="padding-left:25px;padding-right:25px;">
TEXT HERE
</div>

Such a blockquote may look better if it’s fully aligned [*]:

<div style="text-align:justify;padding-left:25px;padding-right:25px;">
TEXT HERE
</div>

Again you can change the numbers etc.

Or you can style your blockquotes any way you like – see codes for text color, size, and font, for spacings, for background color, for borders.

[*] Example:

The excerpt that follows, with padding left and right, is left-aligned (the usual default): line endings staggered.

THE mental features discoursed of as the analytical, are, in themselves, but little susceptible of analysis. We appreciate them only in their effects. We know of them, among other things, that they are always to their possessor, when inordinately possessed, a source of the liveliest enjoyment. As the strong man exults in his physical ability, delighting in such exercises as call his muscles into action, so glories the analyst in that moral activity which disentangles.

(Beginnning of The Murders in the Rue Morgue, by E.A. Poe)

The excerpt that follows, with padding left and right, is justified: line endings aligned.

THE mental features discoursed of as the analytical, are, in themselves, but little susceptible of analysis. We appreciate them only in their effects. We know of them, among other things, that they are always to their possessor, when inordinately possessed, a source of the liveliest enjoyment. As the strong man exults in his physical ability, delighting in such exercises as call his muscles into action, so glories the analyst in that moral activity which disentangles.

But watch out – justifying may produce big gaps between words if the number of spaces per line is too low (i.e. when the text column is narrow and/or the font-size large and/or some words very long):

… so glories the analyst in that moral activity which disentangles.

In that case you must add hyphens where appropriate. Note that a) some browsers or browser versions magnify the whole page when you zoom in or out, but some others magnify the text only, so the number of characters/words per line changes; b) if at some point you change theme, the main-column width will probably be different. For those two reasons you mustn’t type plain hyphens – you must add the html for a soft hyphen (shows up if necessary, disappears when it no longer falls at the end of a line): &shy;

http://wpbtips.wordpress.com/

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

Discussion

57 thoughts on “Formatting text pt. 2: indents and blockquotes

  1. Panos,

    Interesting that you used inches (“text-indent:.3in”). It also works with cm. Not that I’m experienced, but is that not unusual?

    So what is the difference between px em and now in or cm? Oh, and then there is % sometimes used in html. Sorry, anyway I guess I could Google…

    (I would say html code rather than symbol—symbol being one thing, and code being made of many symbols)

    Posted by Tess | June 19, 2009, 09:34
  2. Sorry, I made the corrections but had no time to reply to the comment (or the mails…).

    I copied those codes from a collection I had saved long ago, when I hadn’t understood their workings yet, and neglected to change the units. Units such as in or px are absolute; em and % are relative. For instance, if you zoom in, with an em number the indent will remain the same in proportion to the letters (say, five letters in), i.e. grow longer in absolute terms.

    Posted by Panos | June 20, 2009, 06:11
  3. thanks for this, just what i needed

    Posted by naughtee | December 10, 2009, 09:03
  4. @naughtee: You’re welcome.

    Posted by Panos | December 10, 2009, 15:21
  5. This is a great tutorial. I’ve come to expect nothing less than brilliant from you and you deliver. Thanks. :)

    Posted by timethief | December 11, 2009, 03:09
  6. @timethief: Thanks! Now will you cut down on making others blush please?

    Posted by Panos | December 11, 2009, 10:54
  7. Thank you! Worked perfectly!

    Posted by Christy B. | January 9, 2010, 06:13
  8. @Christy B.: You’re welcome!

    Posted by Panos | January 10, 2010, 02:58
  9. Thanks for the tip about how to add spaces to the beginning of a line!

    Posted by Amy | March 17, 2010, 06:48
  10. Hey wait, I add the code   before my line five times (in the html tab), and at first I can see that the line is indented. But then when I hit Save Draft, it goes back to the way it was before. When I click on the html tab, the code   is no longer there. Do you know why this is happening and what I should do to fix it? Is it because I am entering the “spaces” at the beginning of a single spaced line? (In the visual tab, I hit Shift + Enter to make the line break a single spaced line. I’m writing poetry.) Thanks for your help!

    Posted by Amy | March 17, 2010, 07:24
  11. @Amy: You’re welcome. Yes I know why this happens (and I must update the post)… The WP editor doesn’t like seemingly useless code such as multiple spaces or any no-content section; these types of code stay in place if you use the html editor only, but are stripped out if you switch to visual. Try this instead (with as many crosses –or any other character– you need in each case):

    <span style="visibility: hidden;">+++</span>INDENTED LINE HERE

    [Post updated]

    Posted by Panos | March 17, 2010, 14:43
  12. Thank you, Panos! That works perfectly. Thanks for your response and for writing these two formatting text entries. I’ve found them extremely helpful.

    Posted by Amy | March 18, 2010, 18:16
  13. You’re welcome!

    Posted by Panos | March 19, 2010, 00:01
  14. Hi Panos,
    It would have been way way better if you could use an example to show the effects of the code. It would have made for better impact and people who don’t have much of an imagination (like me) could have also befitted from your tutorial.

    To illustrate my point look at the two examples of the block quotes you are trying to show. For me, it says the next one is better but till I see the result on your site/tutorial how do I know?

    If you have the time and the inclination, please use an example something like “quick brown fox jumps over the lazy dog” or something else and use it illustrate the differences.

    This would make it easier and better for all concerned. Just my 2 paise :P

    Posted by shirishag75 | June 17, 2010, 16:26
  15. @shirishag75: Hi and thanks for the suggestion. You mean like I’ve done in this post?
    I might give it a try. (But I hope you’re referring to blockquotes only, not the rest.)

    Posted by Panos | June 17, 2010, 20:04
  16. @Panos: yup exactly like you have done in the next post which you have linked. And yes, I mean about doing it for blockquotes in this post. This would make things easier. I do hope you update it as this post may be relevant for a long long time (unless wp gives us some GUI tools to manage blockquotes better which seems unlikely though) .

    Posted by shirishag75 | June 18, 2010, 15:42
  17. Done!

    Posted by Panos | June 19, 2010, 08:15
  18. I find that using this coding from above:

    TEXT HERE

    creates space between the paragraphs. What I’d like is no indent on the first paragraph, with first-line indents on all the ensuing graphs, but with no space between paragraphs (book-style). Can this be accomplished?

    Posted by Cladrite Radio | August 18, 2010, 23:40
  19. Just to add a date point: I’ve been using multiple uses of   but that creates inconsistent spacing in the indents, even though I’m coding five spaces each time.

    Posted by Cladrite Radio | August 18, 2010, 23:41
  20. Yikes, “multiple uses of the coding for no-break-space” is what I was trying to say up there.

    Posted by Cladrite Radio | August 18, 2010, 23:42
  21. You need this:

    <div>PAR.1 HERE</div>
    <div style="text-indent:23px;">PAR.2 HERE</div>
    <div style="text-indent:23px;">PAR.3 HERE</div>
    <div style="text-indent:23px;">PAR.4 HERE</div>
    etc.

    Posted by Panos | August 19, 2010, 00:51
  22. Thanks, Panos, but that creates space between the paragraphs. Any way to avoid that?

    Posted by Cladrite Radio | August 19, 2010, 02:04
  23. That’s not supposed to create space. Can you link to an example where you’re getting this?

    Posted by Panos | August 19, 2010, 02:10
  24. Oddly, it’s working now, though I’m doing nothing different that I’m aware of. Thanks, Panos.

    Posted by Cladrite Radio | August 19, 2010, 02:33
  25. Hi Panos,

    These text-formatting tips are so helpful!

    I need to do a hanging indent within an HTML table on a WP page. I noticed that I needed to replace “margin-left” with “padding-left” to keep the left margin in the cell. I also had to add the global padding (in the tag to make text in cells with the hanging indent to line up with the non-indented cells.

    So, if I have this for my table:

    Then I need this for my cells with hanging indent:

    Am I going about this the right (or easiest) way?

    Thanks,
    Rod

    Posted by Rod | August 28, 2010, 20:41
  26. Ooops! I forgot my code tags. It should have said:

    So, if I have this for my table:

    Then I need this for my cells with hanging indent:

    Rod

    Posted by Rod | August 28, 2010, 21:50
  27. Can’t get my code to appear, Panos. How do I do that?

    Posted by Rod | August 28, 2010, 21:52
  28. One more try:

    So, if I have this for my table:

    <table cellpadding="5">

    Then I need this for my cells with hanging indent:

    <td style="padding-left:39px;text-indent:-34px">

    Sorry for all the posts.

    Posted by Rod | August 28, 2010, 22:14
  29. @Rod: No problem. But better link to the post/page in question so I can see the actual material.

    Posted by Panos | August 28, 2010, 23:41
  30. @ Panos Here’s a link to a page demonstrating my problem:

    http://fgmea.org/test/

    password: password

    I also have a problem with my cellspacing tag having no effect on the table, but cellpadding works fine.

    Theme issues, perhaps?

    Posted by Rod | August 29, 2010, 03:23
  31. Yes, margin doesn’t work in a td tag. Padding is extra space between one or more of the boundaries of a box and the material contained in it, while margin is extra space outside the box. My understanding is that margins can apply to an independent element only (e.g. a paragraph or an image – or a complete table), not to a table cell.

    So your solution in row 3 is quite correct. If you’re really new to HTML, then you definitely have a flair for it!

    (But I don’t see why you need hanging indents in table cells.)

    As for cellspacing, in many themes it would work, so yes it’s a theme issue. Some details of how a table shows up are specified in the CSS of each theme, and some commands don’t work in all themes. Unfortunately you’ve got a self-hosted blog while I’m a wp.com user, so I can’t experiment with the theme you’re using.

    Posted by Panos | August 29, 2010, 17:55
  32. @Panos Thanks for all your help, Panos! Go here to see why I want hanging indents: http://fgmea.org/links

    I ended up just using the margin and text-indent inline (right term?) so I can apply it only when I need it, inside or outside a table. It’s really very handy. Perhaps there’s a better way to achieve the same result? On the same page I used the negative margin tip you gave me for text and applied it to my little facebook and twitter icons to make them sit where I wanted. I’m hoping this won’t be a problem in any browsers.

    I’ve finally learned to never use the WP Visual Editor because it screws up everything I code by hand. So, I’m forced to learn just enough to accomplish my task. I’ve been experimenting with using your tips in lots of ways and then seeing if it works or not. Your blog has saved me lots of time and pain. Thanks again.

    Rod

    Posted by Rod | September 2, 2010, 18:40
  33. @Rod: I never use the visual editor either; it’s ok for very basic operations only.

    For the list of links you linked to, you don’t need a table and all that coding – you only need padding left for each subordinate link:

    <a href="http://acda.org/">American Choral Directors Association (ACDA)</a>
    <a style="padding-left:24px;" href="http://vaacda.org/">Virginia Chapter (VA-ACDA)</a>
    [paragraph break here, etc.]

    Posted by Panos | September 3, 2010, 14:22
  34. @Panos Wow I was using a lot of unnecessary code! I’ve re-coded the page here: http://fgmea.org/links/ Many thanks!
    Rod

    Posted by Rod | September 14, 2010, 04:58
  35. @Rod: You’re welcome! Table coding is hardly ever necessary if you don’t need rows of objects.

    Posted by Panos | September 14, 2010, 17:38
  36. heyas;

    i tried the div style text indent in the html post editor, but it isn’t giving me any indents anywhere. i’m using the garland theme; are there certain themes that are more condusive to allowing one to have leading spaces than others?
    oh, i just hit publish, and it stripped out the style text indent code, and left me with only div by itself. :(

    as an alternative, is there a way to set up a preformatted text section to put in automatic line breaks? because the last time i tried to use preformatted, it stretched my paragraphs all out into one line each.

    http://bloodsongtermagant.wordpress.com/2011/02/

    Posted by bloodsong | February 8, 2011, 00:18
  37. I understand you’re talking about first-line indents. So, this comment is enclosed in the exact code I’m giving for first-line indents in my post.

    No, these things aren’t theme-dependent. If the post editor stripped out your code, this means you made a typo that rendered the code invalid. Did you try copy-pasting my actual examples?

    I never use pre tags: they are supposed to preserve multiple spaces and line breaks of copy-pasted text, but yes the results sometimes are unpredictable.

    Posted by Panos | February 8, 2011, 03:07
  38. OMG IT WORKED!! oh thank goodness! i must have messed something up when i changed the number of the pixel indents or whatever. oh bless you! i spent 2 hours doing 2 pages last night, trying to get all the nbsps to paste right from my browser.

    Posted by bloodsong | February 9, 2011, 15:45
  39. @bloodsong: You’re welcome!

    Posted by Panos | February 9, 2011, 16:08
  40. Thanks for this info. On this topic it beats the Support pages hands down (I can understand it!).
    Coding for invisible characters worked perfectly to create a one-off indented second line of a paragraph , and it’s so simple.
    I typed my text in Visual Editor (included the ‘+’ signs to figure how many I needed) then switched to HTML and copied & pasted your html code, incorporated the correct number of +s for my work, and voilà.

    Posted by Rambler | March 11, 2011, 09:32
  41. You’re welcome and thanks! Support docs mostly deal with the standard functions of wp.com blogs, and HTML isn’t such a function, so yes, I’m afraid some of my posts on HTML are better. For example, compare this:

    http://en.support.wordpress.com/editors/font-size-color/

    with this:

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

    Posted by Panos | March 11, 2011, 23:57
  42. I bookmarked all 5 of your ‘Formatting text’ pages yesterday; and today added a bookmark for ‘Codes useful for text widgets’ after (oh so simply) following your instructions on how to create a text link, which opens in new window, in a widget.
    Fiddling with font size and color looks like a fun thing to do; I’ll tackle that another day, but shall use your instructions.
    When I looked at the Support page, the example text in different fonts & colors inspired me, but upon reading the text my inspiration quickly vanished (I increased the thumbs-down score by one).

    Posted by Rambler | March 12, 2011, 10:01
  43. Yes, unfortunately that Support page is fun but it’s not serious…

    Posted by Panos | March 13, 2011, 18:29
  44. This is an EASY work-around. The issue is that most posters look at it as a programming issue. It’s not. It is about visual design. When U want an indented sentence, simply type a letter before the start of the sentence. Now highlight that letter. Now choose white from the color menu. Paint the extra word white and you are done. An indented sentence.

    Posted by Anonymous | September 7, 2011, 07:48
  45. Sorry, this is a well-known but bad workaround: the “painted” characters will show up in search engine results; they will show up in the RSS feed of your subscribers; they will show up if a user copypastes the text to save it in their computer or create a quotation; they will show up if a user has set their browser to display the colors they prefer instead of the original ones; they will show up on your category/archive pages if the theme displays beginnings instead of full posts.

    Posted by Panos | September 7, 2011, 11:01
  46. Very useful post, thanks for this – it’s great to see how to do these tricks to format in one place :)

    Posted by RandomizeME | October 24, 2011, 06:54
  47. You’re welcome! Thanks too, because your visit made me take a look at the post and correct the left-aligned vs justified examples (used to be ok when I was using Garland but became identical when I switched to Morning After).

    Posted by Panos | October 25, 2011, 03:26
  48. Another grateful user saying THANK YOU! I’ve been trying to figure out indenting text for days, and here it is, all laid out nice and simple… Wish I’d come here first; I will next time I want to format anything beyond bolds and italics.

    Posted by Karen Carlson | March 17, 2012, 05:12
  49. You’re welcome! (Questions also welcome.)

    Posted by Panos | March 17, 2012, 16:16
  50. Oh, good – because now that I have my Cool Sites for Writers and Readers page formatted (it’s so much easier to read), I have a new more advanced issue: indenting within a blockquote within a post.

    Specifically: I’m quoting a three-line stanza of a poem; line 2 is indented. I use blockquote for all my quotes, and I’ve been able to do the indent, but it double-spaces everything. If I eliminate spaces and line returns between the text and the div tags, the first two lines are single spaced, but there’s a double space before the third line.

    I can live with the consistent double spacing, but I’ll have to acknowledge it since I’m commenting on the formatting and I don’t want to imply the poet meant to double-space (some poets take formatting very seriously). So I’d prefer to avoid it if possible.

    It’s a draft so I can’t point you to a page; I hope this makes sense… any suggestions? I use Ocadia theme if it matters.

    Posted by Karen Carlson | March 21, 2012, 05:14
  51. It doesn’t really make sense, because I don’t see what div tags have to do with a blockquote. And I can’t give you suggestions if I can’t see what you’ve done. You can temporarily publish the post as a password-protected post and give me the password so I can check its code, or you can copy the relevant part from the HTML editor and show it to me via Textsnip (see my comment guidelines).

    Posted by Panos | March 21, 2012, 05:47
  52. Thanks! But I’ve discovered a workaround – I use the div tag on all three lines, just indent the second one more. (I sometimes ask for help before I really, REALLY try to figure it out myself. Gotta stop doing that).
    Thanks again!

    Posted by Karen Carlson | March 21, 2012, 16:37
  53. If I understand correctly, you want three lines in a blockquote, second line indented. You don’t need any div tags for this, you just need this:

    <blockquote>
    first line
    <span style="margin-left:22px;">second line</span>
    third line
    </blockquote>

    Posted by Panos | March 21, 2012, 19:14
  54. Hah, leave it to me to overcomplicate things – this works great, thanks so much!

    Posted by Karen Carlson | March 22, 2012, 02:49

Trackbacks/Pingbacks

  1. Pingback: Div Style Text-Indent « Bloodsong's Blog II - February 9, 2011

  2. Pingback: Conversation between a boy and a girl « Reading, scribbling, etc… - June 23, 2011

  3. Pingback: Pushcart 2012: Poetry « A Just Recompense - April 3, 2012

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,599,328 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: