0

This is the CSS:

p + p {
 text-indent: 1.1em;
 margin-top: 0;
}
p {
 font-family: 'Crimson Text', serif;
 margin: 0;
}

HTML:

<p>...<p>
<p>...</p> (new paragraph)
<p><br><p>
<p></p> (new scene)

(This is WordPress' default text editor)

I'm not sure how it works (I took it form a site that I can't remember). It produces this:

enter image description here

There is only one problem. The third paragraph is a new scene and it shouldn't be indented. I wonder if there is a way of fixing this with CSS? (CSS3 is OK)

EDIT:

I guess jQuery is the only way? Any suggestions of doing it with jQuery?

TMB
  • 4,683
  • 4
  • 25
  • 44
alexchenco
  • 53,565
  • 76
  • 241
  • 413
  • I'd suggest just adding classes to the ones that don't get indented and/or don't have a break after them. – Chad Aug 04 '12 at 05:11
  • What is the structure of the html? Would need to know what tags are used for paragraphs and scenes. – TMB Aug 04 '12 at 05:11
  • may this helps http://stackoverflow.com/questions/1139763/whats-css-style-p-p – Krish Aug 04 '12 at 05:12

4 Answers4

2

I would say to structure it out into scenes.

Markup: 

<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>
<div class="scene">
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

And some CSS: 

.scene p { text-indent: 1.1em; }
.scene p:first-child { text-indent: 0; }

That cleans up your markup, and enables consistency across the board. (This is also ie7/8-friendly)

Chad
  • 5,308
  • 4
  • 24
  • 36
  • @Torr3nt That's a good option I guess I'll have to find a way of changing WordPress' editor. – alexchenco Aug 04 '12 at 05:41
  • 1
    Wordpress' editor has both a visual and an HTML editor. You can switch it in the upper right-hand corner of the textbox. – Chad Aug 04 '12 at 05:43
0

It's because you have all adjacent paragraph tags. If you change your HTML to this:

<p>...<p>
<p>...</p> (new paragraph)
<br>
<p></p> (new scene)

It should work - if you want extra spacing, maybe you should wrap your break inside another div?

Mark Oreta
  • 10,346
  • 1
  • 33
  • 36
0

You should mark a change of scene using a method other than <p><br></p>, which is a paragraph containing a line break only. The following is artificial too but causes an empty line even when CSS is off:

<p>...</p>
<p>...</p>
<div>&nbsp;</div>
<p>...</p>

Here the third p is not preceded by a p element but a div element, so the selector p + p does not apply to it.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • 1
    @alexcheco, then you should get an editor that helps in getting your job done, see e.g. http://wpmu.org/why-you-hate-the-wordpress-text-editor/ – Jukka K. Korpela Aug 04 '12 at 05:44
0

Agree with @Jukka K. Korpela, you should probably be using something better. I have never used word press, but if you can't change the markup, then you might want to change.

If you just need it to work for now, you can run this script and it will fix the css values.

$('br').parent('p').next('p').css('text-indent', '0em');​

You just need to make sure you have the <br/> tag before your first scene.

<p><br/></p>

http://jsfiddle.net/bnMzQ/25/

TMB
  • 4,683
  • 4
  • 25
  • 44