CODEWITHSUNDEEP
htmlcssquotation-marks
manuel
manuel

Reputation: 105

Styling quotation marks

I have run into and issue when styling quotes. So what I'm trying to do is pull the quotation marks down a bit relative to the text so that it lines up well. I played around with relative and absolute positioning but could not figure it out. This program will become a random quote generator and the position of the end quote has to be such that it lines up the same way relative to the text if it there is a quote that takes up several lines. 

body {
  background-color: rgb(44, 62, 80);
}
.quoteMachine {
  margin: 100px auto 0 auto;
  padding: 40px 60px;
  max-width: 600px;
  min-height: 225px;
  border-radius: 5px;
  background-color: white;
}
.theQuote {
  text-align: center;
  font-size: 30px;
  color: rgb(44, 62, 80);
}
.quotetationMarks {
  font-size: 60px;
  font-weight: 600;
}
.quoteAuthor {
  text-align: right;
  font-size: 20px;
  color: rgb(44, 62, 80);
}
.twitterButton {}
<div class="quoteMachine">
  <div class="theQuote">
    <blockquote><span class="quotetationMarks">&ldquo;</span > They call me Mister Tiibs <span class="quotetationMarks">&rdquo;<span></blockquote>
      </div>
      <div class="quoteAuthor">
        - hello
      </div>
      <button class="twitterButton"></button>
      <button class="newQuoteButton"></button>
      
      
    </div>

Upvotes: 4

Views: 2693

Answers (3)

Cameron Hurd
Cameron Hurd

Reputation: 5031

Edit: While vertical-align: middle; is a very valid and elegant approach, sometimes you've got a very specific position in mind for the quotation marks. If you need to match a mockup to pixel perfection, this approach grants you the flexibility.

You might get some mileage out of using pseudo-elements to render the quotes, and relative/absolute positioning to get them "just so".

This is especially important to help position them across line breaks. (I've edited my example to force a line break, in order to illustrate the robustness of this approach.)

From MDN:

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

And specifically for the ::before pseudo element:

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.

These quotes you're styling are cosmetic content, so I think that this is a great use-case for the ::before pseudo element.

I've forked your codepen here: http://codepen.io/cam5/pen/kkxpbX, but here are the relevant parts

<!-- quote HTML -->
<blockquote>
    <span class="quotationMark quotationMark--left"></span > 
        They call me&hellip;<br /> Mister Tiibs 
    <span class="quotationMark quotationMark--right"></span >
</blockquote>

and the CSS:

/* quote css */
.quotationMark {
  position: relative;
}

.quotationMark--left::before,
.quotationMark--right::before {
  font-size: 60px;
  font-weight: 600;
  position: absolute;
  top: -15px;
}

.quotationMark--left::before { 
  content:"\201C"; 
  left: -45px;

}
.quotationMark--right::before { 
  content:"\201D"; 
  right: -45px;
}

This CSS Tricks resource is great when you're trying to locate the ISO for putting a certain glyph into a CSS content rule: https://css-tricks.com/snippets/html/glyphs/

Setting the parent element, the .quotationMark to display: relative; will mean that the top, right, left values passed to the children (the pseudo-elements) of it bearing the position: absolute; property are calculated relative to their parent.

Upvotes: 2

Carlos27
Carlos27

Reputation: 185

Maybe adding vertical-align: sub; to .quotetationMarks is what you are looking for?

You can also use fontawesome, that's always a good option. -> http://fontawesome.io/icon/quote-right/

Upvotes: 3

CodingWithSpike
CodingWithSpike

Reputation: 43698

Since the spans are inline elements, you could add vertical-align: middle; to .quotetationMarks and that would move them down toward the middle of the rest of the string.

Alternatively, you could add position: relative; top: 10px; if you need more precise control.

Upvotes: 5

Related Questions