Styling quotation marks

Question

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>

You just need a CSS selector for `.quotetationMarks` (the quotation marks in your sample) - then you can just set its `position: relative` and move it up/down using the `top` or `bottom` position values. Also, see @Utkanos' suggestion about spelling — Geoff James, Oct 04 '16 at 12:59
GREAT! that works, the only thing is that I don't exactly understand why. How come the quotation marks are relative to the quote and not the top of the div?. — manuel, Oct 04 '16 at 13:04

CodingWithSpike · Accepted Answer · 2016-10-04T13:01:50.680

5

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.

edited Oct 04 '16 at 13:01

answered Oct 04 '16 at 13:00

CodingWithSpike

42,906
18
101
138

Great suggestion! :) – Geoff James Oct 04 '16 at 13:01
that's exactly what I did :) Works great. The only things I don't understand is why the quotation marks are relative to the quote and not the div when setting position relative. – manuel Oct 04 '16 at 13:06

score 3 · Answer 2 · answered Oct 04 '16 at 13:04

3

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/

answered Oct 04 '16 at 13:04

Carlos27

185
9

Cameron Hurd · Answer 3 · 2016-10-04T13:18:24.750

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.

Styling quotation marks

3 Answers3