9 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ummm...I can't work out why there is such a large gap under the third quote (the others are also large but this one is larger). It seems to me the normal text should wrap under sooner than it does.

It seems to be coming from #content p but .pullquote p won't override it.

Can someone point me in the right direction please?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

It's your ginormous bottom

It's your bottom margin.

#content p {
margin:0 0.5em 1.2em;
}
There's a bit more overlap of space requirements on the third quote, that makes the wrap occur a line of text lower.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

:p

Quote:

It's your ginormous bottom

Don't you mean my gorgeous bottom Your Cheekiness! Tongue

Yes I had actually worked that out and figured that the ".pullquote p" wasn't overriding but couldn't figure a way of specifying a narrower margin on the pullquote.

I looked with Firebug at everything but the normal text and I now see how high up that starts. Anything I can do...should do?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Perhaps I did

Perhaps I did, but I would require photographic evidence either way. Tongue That has nothing to do with my cheek(ines)s, though.

Reduce the cheeky margin on the pullquote, e.g.

.pullquote p {
  margin-bottom: .5em;  /* or zero */
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Vertical typographic rhythm

A more robust solution is to mind the vertical rhythm. Make each line of type occupy an integer factor of some value. In that way, all lines are aligned no matter the font size, and if done well, no vertical overlap occurs between lines of text in the columns. For an example, see my own site's common stylesheet. Note the treatment of line height and margins for various sized elements such as p, blockquote, h1-6, #abstract p, #notes ol, etc..

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Aaah...an impossible angle

Aaah...an impossible angle I'm afraid Laughing out loud

I had reduced the margin on .pullquote p at some stage though I realise it wasn't there when you looked.

I've just played around with both...

When I put the font-size and line-height on the .pullquote it works, but as you can see when I put it on the .pullquote p it doesn't (I've just made it enormous because it's now trying to be 2.5 times 90%

Quote:

A more robust solution is to mind the vertical rhythm. Make each line of type occupy an integer factor of some value. In that way, all lines are aligned no matter the font size, and if done well, no vertical overlap occurs between lines of text in the columns.

Ummm...sorry in trying to raise the tone of this thread you've gone waaay above my head! Smile While I can see what your css is doing, I don't understand this explanation - could you try again please?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 58 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Well, I'll try to make the

Well, I'll try to make the thing understandable.

Let's look at a line of text at the usual browser default values. The values for P are 16px as the 1em font face size, 1 em top and bottom margins at normal line height, whatever that is. (I've found it to be 1.2, which explains why some browsers have a 19px line height, and others 20px.)

For the purposes of this exercise, we'll use a 16px font face and a 1.25 line height. That means each "normal" line of text is 16 × 1.25 = 20px high. We'll talk about margins in a moment.

The next step is to make any other font-size take up 20px, or some multiple of 20px, e.g. 30 or 40px. Let's look at 1.25em/20px, 1.5em/24px, and 2em/32px font-sizes.

1.25em squats right on top of our target value. So we go to 40px as the desired line height. So for 1.25em font, use 2 for the line-height value. (40 ÷ 20 = 2). We have the same issue with 1.5em/24px. We're still going for a 40px line-height, so 40 ÷ 24 = 1.6667 line-height. For 2em/32px, 40 ÷ 32 = 1.25 line-height. At 2.5em, we reach another milestone, and our new figure is 3 line-spacings, or 60px.

Margins are even easier, as they're always a single line-height value, or 20px. Divide 20px by the computed value of the font-size.

For this explanation, I used the computed pixel values, but you can do everything directly from the em values. In any case, do remember that nesting will bite whether it's gorgeous or ginormous.

If you prefer a different base leading, not a problem. If you want 1.75em line-spacing, your new figure will be 28px, 16 × 1.75 = 28, and multiples are 28px, 56px, 84px, etc..

One thing to notice is that it is considered to be good typographic design to carry your line spacing over to horizontal indents. For a paragraph with 1.25em margins, make your indentions 1.25ems, or maybe doubled, 2.5ems. Notice that the normal indention for block quotes and for lists is 40px; that's 2.5em at 16px font size.

Picking a nit or three:

Misspelled Ms Nin's given name, Anaïs. (That's an i umlaut)

OK, I'll get the rest another time. Sad

Here's a stab at bringing vertical harmony to your pull quote.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>...</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {
    font: 100% verdana, sans-serif;
    line-height: 1.25;
    margin: 1.25em;
    }
 
  p {
    font-size: 1em;
    margin: 1.25em 0 0;
    }
 
  h2 {
    margin-bottom: 0;
    }
 
  #main {
    width: 68%;
    }
 
  .pullquote {    /* outline: 1px dotted gray; */
    color:#5a00b0;
    float: left;
    font-family: georgia, serif;
    font-style: italic;
    margin: 0 1.25em 0;
    text-align: right;
    width: 180px;
    }
 
  .pullquote p {
    font-size: 1.5em;
    line-height: 1.6667;
    margin: .8133em 0 0;
    }
 
  .pullquote p span,
  .pullquote p cite {
    outline: 1px dotted gray;
    }
 
  .pullquote em {
    font-weight: bold;
    }
 
  .pullquote strong {
    font-weight: bold;
    font-size: 1.667em;
    line-height: .6;
    }
 
  p.citation {
    font-size: .667em;
    line-height: 1.25em;
    margin-top: 1.25em;
    }
 
 
 
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="main">
    <h2><a href="index.php">Tapping Success</a></h2>
 
    <blockquote class="pullquote">
      <p><span>&ldquo;We <small>don&apos;t see</small> things as
      <em>they</em> are, we see them as</span>
      <span><strong>we</strong></span><span>
      are&rdquo;</span></p>
 
      <p class="citation"><cite>~Anaïs Nin</cite></p>
    </blockquote>
 
    <p>How do you define success?</p>
 
    <p>What is it you want to achieve and what hurdles do you face
    in getting to them? Or even getting started?</p>
 
    <p>What if there was a simple, safe, easy and effective way to
    overcome those limiting beliefs?</p>
 
    <p>EFT &mdash; Emotional Freedom Techniques &mdash; is a powerful self-help
    tool that puts you in command and can be used on almost any
    issue, experience or situation you find yourself in.</p>
  </div><!-- end main -->
</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

WOW! Ask for clarification's right

Oh My Goodness! You spoil me Wink

Thank you soooo much Gary, now that you really HAVE explained it, I realise I have read about it but many moons ago and I can't find the site that did a pretty good job of it.

Having the sample code to go by helps enormously because I can see step by step. The problem now of course is that I had settled on 96% Arial (because the words "hang together" better than the others).

Yes, I finally spotted that I'd misspelled Anaïs and corrected it this afternoon. When you've recovered you can point out the rest Smile

Gary you are brilliant {mwah} thank you once again for taking the time and effort to write and do this.

For anyone else reading this here's a converter that I had bookmarked:-

http://riddle.pl/emcalc/

and a table...
http://sureshjain.wordpress.com/2007/07/06/53/

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Apologies Gary but I'm not

Apologies Gary but I'm not going to get back to this until tomorrow.

I did understand it though and did a quick copy/install to have a look as you will see from the code. I had forgotten to take a snapshot of mine to compare, so I took a snapshot of yours and reinstalled mine to compare.

What it did point up to me though is that Georgia doesn't look right and next to nobody will have Fontin Sans installed Sad Given that I think Fontin Sans does fit better with what there is of this site, I'm thinking I should make an image of the quotes.

Yes, I could try @fontface or a replacement technique but it's all too complicated for me at the moment, I just need to get the rest of this site up and then maybe I can play with it a bit.

Comments welcome.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 42 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Ummm...

Okay, scratch the pictures of the quotes - too hard to get it right, can't do an umlaut.

Back to you...I have just put up your code but changed it to arial for the time being.
However it just doesn't look "happy" with that line spacing even if it is correct. So I've mucked about with it a bit.

You and your cite tag! Smile

If <small> works, why doesn't <larger> or <x-larger>?

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile