Posts tagged with “css”

July 30, 09

Pulling the quotes with CSS

Never thought I was ever gonna blog about the CSS, but this time it's an exception – couldn't find the solution on the web, yet it turned out to be very simple – CSS pullquotes.

Most of the solutions that I found were based on using background elements for quote characters, the problem with this is that the closing quotes are not aligned with the last letter of the quote. So I've tried :before and :after CSS pseudo selectors to inject quotes and it worked fine with Safari4/FF3 but older browsers were ignoring postion: absolute setting on them. No positioning, no joy.

I took the path of the least resistance and used <span> tags to mark the quotes, and here's the result:

...This is just a simple example to show how to style the blockquote element with pullquotes. Happy birthday Mum!


The HTML looks like this:

<blockquote>
   <span class="open">“</span>...This is just a simple example to show how to style the blockquote element with pullquotes.<span class="close">”</span>
</blockquote>

And the CSS:

blockquote {
    font-family: Arial, _sans;
    position: relative;
    text-indent: 15px;
    font-size: 14px;
    line-height: 1.3;
    display: block;
    width: 295px;
    margin: 0;
    }
blockquote span {
    /* Define custom font for quotes here */
    font-family: Georgia, _serif;
    text-indent: 0;
    font-size: 50px;
    position: absolute;
    color: #fc0;
    }
blockquote .open {
    /* May need to adjust the position depending on the font type/size */
    top: -15px;
    left: -5px;
    }
blockquote .close {
    /* May need to adjust the position depending on the font type/size */
    margin-left: 0px;
    /* Alternatively use padding-top */
    margin-top: -5px;
    }
01:10 PM | | 0 Comments | Tags: ,