Embrace the words enveloped within large quotation marks

Question

Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image:

Can anyone suggest a proper method for achieving this?

(Additionally, is there a stylish closing variation for this quote? >> 69)

<p><span>&#8223</span><a href="#">Foobar</a><br />Foobar<br />Foobar<span>&#8223</span></p>
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p>
<p><span>&#8223</span><a href="#">Foobar</a><span>&#8223</span></p>

body {
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: rgba(50, 50, 50, 1);
}

span {
    font-size: 100px;
    position: relative;
    top: 50px;
}

p {
    line-height: 10px;
}

html css

Answer 1

Answer №1

provides valuable insights on the topic.

This Demonstration demonstrates how it can be implemented

CSS

blockquote {
    background: #f9f9f9;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    padding: 30px;
    position:relative;
}
blockquote:before {
    position:absolute;
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    top:0;
    left:0;
}
blockquote:after {
    position:absolute;
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height:0;
    bottom:0;
    right:0;
}

HTML

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel turpis at libero cursus sagittis.
Nullam molestie posuere purus sed aliquet. Integer euismod neque nec justo venenatis, eget consequat nunc pulvinar. Fusce et scelerisque ex. Aliquam erat volutpat
</blockquote>

Answer 2

provides valuable insights on the topic.

This Demonstration demonstrates how it can be implemented

CSS

blockquote {
    background: #f9f9f9;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    padding: 30px;
    position:relative;
}
blockquote:before {
    position:absolute;
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    top:0;
    left:0;
}
blockquote:after {
    position:absolute;
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height:0;
    bottom:0;
    right:0;
}

HTML

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel turpis at libero cursus sagittis.
Nullam molestie posuere purus sed aliquet. Integer euismod neque nec justo venenatis, eget consequat nunc pulvinar. Fusce et scelerisque ex. Aliquam erat volutpat
</blockquote>

Answer 3

Answer №2

The special styling of the blockquote is designed to appear differently in various browsers; displaying with large quotes before in standards-compliant browsers, and with a thick left border and light grey background in Internet Explorer. This unique approach to styling blockquotes eliminates the need for nested block-level elements like p, converting a paragraph into an inline-styled element to prevent content from dropping below the quote.

Custom CSS Styling

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  /* Custom quotation marks */
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
/* Maintain inline display for blockquote paragraphs */
blockquote p {
  display: inline;
}

View JSFiddle example here: - http://jsfiddle.net/xgku06ho/

Answer 4

The special styling of the blockquote is designed to appear differently in various browsers; displaying with large quotes before in standards-compliant browsers, and with a thick left border and light grey background in Internet Explorer. This unique approach to styling blockquotes eliminates the need for nested block-level elements like p, converting a paragraph into an inline-styled element to prevent content from dropping below the quote.

Custom CSS Styling

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  /* Custom quotation marks */
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
/* Maintain inline display for blockquote paragraphs */
blockquote p {
  display: inline;
}

View JSFiddle example here: - http://jsfiddle.net/xgku06ho/

Answer 5

Answer №3

Give this a shot -

p:before {
 content: '"';
}

p:after {
 content: '"';
}

Answer 6

Give this a shot -

p:before {
 content: '"';
}

p:after {
 content: '"';
}

Answer 7

Answer №4

To solve this issue, consider using pseudocode.

p {
  line-height: 10px;
  background: #f9f9f9;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
p:before {
  color: #ccc;
  content: '';
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

Check out the demonstration here.

Answer 8

To solve this issue, consider using pseudocode.

p {
  line-height: 10px;
  background: #f9f9f9;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
p:before {
  color: #ccc;
  content: '';
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

Check out the demonstration here.

Answer 9

Answer №5

If you find that using images in CSS is necessary to achieve the desired result, feel free to tweak the open and close images as needed: http://jsfiddle.net/csdtesting/funeygf0/

blockquote.style3 {
  font: 18px/30px normal Tahoma, sans-serif;
  padding-top: 22px;
  margin: 5px;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/openquote3.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
}
blockquote.style3 span {
  display: block;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/closequote3.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}

<blockquote class="style3"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt  soluta sequitur autem.</span>
</blockquote>

Here's the expected outcome:

Answer 10

If you find that using images in CSS is necessary to achieve the desired result, feel free to tweak the open and close images as needed: http://jsfiddle.net/csdtesting/funeygf0/

blockquote.style3 {
  font: 18px/30px normal Tahoma, sans-serif;
  padding-top: 22px;
  margin: 5px;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/openquote3.gif);
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: 65px;
}
blockquote.style3 span {
  display: block;
  background-image: url(http://css-tricks.com/examples/Blockquotes/images/closequote3.gif);
  background-repeat: no-repeat;
  background-position: bottom right;
}

<blockquote class="style3"><span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta hendrerit mutationem sollemnes. Quis lius dolore et insitam vel. Aliquip consequat futurum claram ut mazim. Facilisi accumsan dolore ii imperdiet consequat. Claritatem aliquip quod putamus vulputate iusto. Doming minim typi zzril lius usus. In clari mutationem autem non sit. Qui augue mirum dynamicus gothica ut. Demonstraverunt  soluta sequitur autem.</span>
</blockquote>

Here's the expected outcome:

Embrace the words enveloped within large quotation marks

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Creating an easy-to-update catalog utilizing an external file: A step-by-step guide

Showing error messages in Angular when a form is submitted and found to be invalid

Locating the save directory with fileSystem API

Ways to adjust the color of a cell in a table

What are some methods to achieve consistent alignment of input fields across different mobile devices using CSS?

Transferring Data Between Two Forms

Tips for including a line within a circular canvas

Switching the default image using jQuery upon click event

Problem with HTML relative paths when linking script sources

What is the best way to set up unique body backgrounds for each page in WordPress?

Eliminating duplicate data submissions with jQuery Ajax

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

developing a multimedia player using HTML5

Validating SASS based on class name

What is the best way to convert my Chatbot component into a <script> tag for seamless integration into any website using React.js?

The JQuery Datepicker function consistently returns a null value when attempting to retrieve the selected date

Unable to see or play local mp4 file in Ionic iOS application

Text appears unclear and fuzzy when using Firefox browser

The WebView.HitTestResult method is currently only receiving <img src> elements and not <a href> elements