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:
Use as many crosses —or any other character— you need in each case.
Single line indents
Change the number to adjust the amount of indentation.
First line indents
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.
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:
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:
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:
TEXT HERE
</div>
Such a blockquote may look better if it’s fully aligned [*]:
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 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 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): ­
https://wpbtips.wordpress.com/
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:34Sorry, 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:11thanks for this, just what i needed
Posted by naughtee | December 10, 2009, 09:03@naughtee: You’re welcome.
Posted by Panos | December 10, 2009, 15:21This 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@timethief: Thanks! Now will you cut down on making others blush please?
Posted by Panos | December 11, 2009, 10:54Thank you! Worked perfectly!
Posted by Christy B. | January 9, 2010, 06:13@Christy B.: You’re welcome!
Posted by Panos | January 10, 2010, 02:58Thanks for the tip about how to add spaces to the beginning of a line!
Posted by Amy | March 17, 2010, 06:48Hey 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@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:43Thank 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:16You’re welcome!
Posted by Panos | March 19, 2010, 00:01Hi 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@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@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:42Done!
Posted by Panos | June 19, 2010, 08:15I 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:40Just 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:41Yikes, “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:42You 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:51Thanks, Panos, but that creates space between the paragraphs. Any way to avoid that?
Posted by Cladrite Radio | August 19, 2010, 02:04That’s not supposed to create space. Can you link to an example where you’re getting this?
Posted by Panos | August 19, 2010, 02:10Oddly, 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:33Hi 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:41Ooops! 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:50Can’t get my code to appear, Panos. How do I do that?
Posted by Rod | August 28, 2010, 21:52One more try:
So, if I have this for my table:
Then I need this for my cells with hanging indent:
Sorry for all the posts.
Posted by Rod | August 28, 2010, 22:14@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@ 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:23Yes, 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@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@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@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@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:38heyas;
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:18No, 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:07OMG 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@bloodsong: You’re welcome!
Posted by Panos | February 9, 2011, 16:08Thanks 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:32You’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:
https://wpbtips.wordpress.com/2009/07/11/formatting-text-pt-5/
Posted by Panos | March 11, 2011, 23:57I 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:01Yes, unfortunately that Support page is fun but it’s not serious…
Posted by Panos | March 13, 2011, 18:29This 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:48Sorry, 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:01Very 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:54You’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:26Another 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:12You’re welcome! (Questions also welcome.)
Posted by Panos | March 17, 2012, 16:16Oh, 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:14It 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:47Thanks! 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:37If 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:14Hah, leave it to me to overcomplicate things – this works great, thanks so much!
Posted by Karen Carlson | March 22, 2012, 02:49