Positioning off of an inline element?

HTML & CSS
1

I am curious if the rules for AP’ed emements are interpreted differently when the parent element is an inline element or has a display of inline. Where is the TOP/ BOTTOM edge of the inline element calculated?

for example, I am trying to position the quotes for a block quote,which are much larger than the regular text, an I wanted to achieve a hanging indent only on the open quote. in another words I didnt want the close quote to be in the same flow as the content, just in case it was the last character before a word wrap, but i also didnt want it to be AP’ed to the blockquote tag ( to avoid the close quote tag always appearing at the right most bottom, even if there is only a few characters in the last line wrap.

I seem to ALMOST have achieved this by having the content of the blockquote wrapped in a span to which I give relative postioning, The open quote I just indented as needed… to the close quote I would give AP, and set to top:100% ; left 100%… and then make minor adjustments with margins. when put to practice the outcome seems random…

for example:

[B]HTML[/B]
                         	<blockquote class="lft" ><span>Vampires are roumored to rather drink blood than beer.</span></blockquote>

[B]CSS[/B]
blockquote {width: 40%; font-family: Georgia, "Times New Roman", Times, serif;font-style: italic;  font-size:120%; line-height:1.35; position:relative; padding-left:3em; padding-right:3em; text-indent:-2.5em}
	 blockquote.rt{float:right;}
	 blockquote.lft{float:left; left:.3em}
	  blockquote span{position:relative;}
 	  blockquote:before { content: "“ ";font-size: 300%;font-weight: bold; line-height:.3; position:relative; top:.5em; color:#FE9D00;;left:.15em}
	  blockquote span:after {content: "”";font-size: 300%; font-weight: bold; line-height:.01;position:absolute; bottom:0; color:#FE9D00;right:0; float:none }

The positioning for this is actually acting as if the inline element had no height … and I have no idea how it’s calculating the right edge, as it is putting the quote roughly midway the width in the element?!

Visually I am trying to achive this:

[B] "[/B]Some phrase that is long enough to wrap for  at least  
  two lines and then have the quote at the END of the
  last line but not off bellow  or by itself[B]"[/B]

BTW
this is an HTML side question but as long as am asking…
semantically, should the CITE tag be inside a block quote or out?

Thanks all!

2

Paul:

Both your examples are very elegant, Thank you. I do DO NOT want the end quote to always be at the bottom left of the blockquote area, as in your last example)

I think your previous example was the elegant solution I was searching for, thanks again When I applied it I got rid of the non breaking space because I didn’t realize its importance. I didnt realize that the NBS would serve to glue the word and the content of the pseudo element together! Genius, Paul.

I did make an improvement by including the NBS in the content of the :after pseudo element.

Thanks again

3

In my example the quote won’t wrap unless a word wraps also due to the non breaking space.

If you want it at the end of the line then that would be the same as putting an image at background-position 100% 100%. I thought you wanted it inline which means the quote goes at the end of the last word.

You could probably do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.blockquote p {
    margin:0;
        position:relative;
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.rt {
    float:right;
}
blockquote.lft {
    float:left;
    left:.3em
}
blockquote p:before, blockquote p:after {
    content: "&#8220; ";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.8em;
}
blockquote p:after {
    content: "&#8221;";
    margin:0;
    display:block;
    text-align:right;
    position:absolute;
    right:1em;
}
</style>
<!--[if IE 8]>
<style type="text/css">
blockquote p:after {right:.5em;}
</style>
<![endif]-->
</head>
<body>
<blockquote class="lft" >
    <p>Vampires are roumored to rather drink blood than beer.</p>
</blockquote>
<blockquote class="lft" >
    <p>Some phrase that is long enough to wrap for  at least  
        two lines and then have the quote at the END of the
        last line but not off bellow  or by itself. </p>
</blockquote>
</body>
</html>
4

Thanks guys.

Paul: I was looking at the article, and I find it hard to believe that they suggest NOT using the site tag when crediting a person!

Shadow:
It’s good to know block quotes do cannot directly contain inline elements. I supposed I a little overzealous, trying to save a tag, but maybe this may make what I am trying to achieve easier, maybe. The .rt/.lft classes are so I can float the blockquote.

BTW, what I am trying to do is get the quote mark to appear immediatly after the last character(letter) of the quote, BUT that if the last character reached the edge of the containing block, the quote mark should still appear right after the last charter , but still on the same line ( so essentially outside the containing element, but on the right), I figured this could only be done with absolute positioning and spans spans or at least p spans

5

I’d disagree because then you have this:

</blockquote>
<p><cite> Cite something</cite></p>

There is no other text in the p element so to what does the cite refer?

If its inside a blockquote then its obvious as to what you are citing but stuck on a paragraph on its own with no other text then the meaning is lost. I prefer to keep it inside as mentioned on this page.

6

randomly depending on browser – no joke. None of them obey vertical-align in relation to line-height the same way. usually the most you can hope to accomplish is fixing the line-height a predictable amount.

My advice - don’t even TRY. Usually what I do is use two background images inside the padding on each side. One on the blockquote for the start, one bottom-left in the padding on the P inside the blockquote. You could use some span and absolute position them, but really it’s rarely worth it. Besides, you don’t need quotes for a quote when you can just set italic and say “close enough”

Invalid markup in MODERN doctypes (aka strict). Blockquote cannot directly contain CDATA or inline tags. It MUST contain at least one block level container (Much like noscript)… So swap that SPAN for a P :wink:

Sure you can slap anything in it any old way in Tranny, but transitional is for sleazing out support for old/outdated crap, not for writing new pages or new code.

Of course you are using :before and :after to add the quotes – which I still say is the wrong approach for quotes as they are CDATA, and as such should be in the markup as QUOTES. This ‘auto-adding’ quotes to things nonsense – NOT A FAN, especially since it doesn’t even work in the browsers the majority of people use. (Hell IE). Generated content is a bad idea. I’d sooner put them in spans in the markup so CSS off it still looks like a quote. As to your positioning, I’m not entirely sure what that has to do with your question – it sounds to me like if you put them in the markup in the first place, you wouldn’t have to play with them as much as you are.

Inline level elements have no dimensions, they’re treated like CDATA in everything but IE. To get that working in standards compliant browsers you would have to specify inline-block (which STILL doesn’t work right everywhere – thank mozilla for that)… or just use a block level tag like P which would be the CORRECT markup. This is why on a inline-level tag setting top/bottom padding is either ignored, or rendered without changing the vertical position overlapping the preceding/following lines, and why setting WIDTH or HEIGHT is outright ignored as well. That’s what inline-block is there to address (which will grow the calculated line-height to fit based on vertical-align)

As I’m fond of saying, the CSS is only as good as the markup it is applied to. Garbage markup == garbage CSS.

I say inside, and since that’s inline-level it too should be in a block-level tag like P.

Blockquotes are another of those tags that people don’t look closely enough at the rules of using them. If I was writing that same code it would probably read:

<blockquote class="sideBarQuote">
	<p>
		<b>"</b>Familiars... I hate Familiars<b>"</b>
	</p><p>
		-- <cite>Blade</cite>
	</p>
</blockquote">

Of course, I’d take a giant axe to those nonsensical PRESENTATIONAL classes like ‘rt’ and ‘lft’ – at that point you might as well go back to using HTML 3.2 without CSS. Say what things ARE, NOT what they are going to look like or how they are placed in the layout!

7

I came back and played with it a bit – here’s what I came up with:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<style type="text/css"><!--

blockquote {
	width:16em;
	padding-left:20px;
	font:normal 100&#37;/140% arial,helvetica,sans-serif;
}

blockquote span {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	overflow:hidden;
	position:relative; /* IE 6- makes quotes actually render! */
	width:24px;
	height:20px;
	margin-top:-8px;
	vertical-align:top;
	text-align:center;
	font:bold 40px/48px arial,helvetica,sans-serif;
}

blockquote .first {
	margin-left:-24px;
}

blockquote .last {
	margin-right:-24px;
}

--></style>

<title>
	Big quotes on a blockquote test
</title>

</head><body>

<div id="pageWrapper">

	<blockquote>
		<p>
			<span class="first">"</span>Life's gonna suck when you grow up, when you grow up, when you grow up, oh, life's gonna suck when you grow up it sucks pretty bad right now.<span class="last">"</span>
		</p><p>
			-- <cite>Dennis Leary</cite>
		</p>
	</blockquote>

<!-- #pageWrapper --></div>


</body></html>

Which in testing works all the way back to IE 5.01. The last span won’t drop because not only does it have no whitespace between it and the last word, but it’s ‘flow width’ is 0px since it’s 24px wide with a right margin of negative 24px. 0 width means it has no reason to drop. It will also push into the margin/padding like I did with the leading quote when the line is long enough…

The line-height issues I address by using px fonts and then chopping off the bottom half. Makes the positioning more predictable even when the default font size changes – which is why this works 75dpi/96pdi/120dpi without issues.

Sometimes it’s worth that extra (OH NOES) 56 bytes of markup. If that extra 56 bytes makes it work all the way back to IE 5 without any headaches – oh well. Beats the tar out of dicking with :before and :after.

8

Paul:
Yes, That more or less what I was doing, or always do generally. The problem is that the AFTER element ( or any element such as span) containing the quote mark is it’s own element. What that mean is, if the content reaches the edge of the containing elopement (P or blockquote or what not) the quote marks get wraped around onto a new line… like this:

" This would be an example of blockquote
text that could prove to be problematic.
"

merely using images or AP or images places the mark always at the bottom right of the element, so if the text DOESNT reach the edge of the element it end up looking like this
(imagine the underscore wasnt there):
" This is considerably shorter
sample text. _______________"

which has a distracting effect typographically

9

Yes that’s html5 being silly again :slight_smile:

BTW, what I am trying to do is get the quote mark to appear immediatly after the last character(letter) of the quote, BUT that if the last character reached the edge of the containing block, the quote mark should still appear right after the last charter , but still on the same line ( so essentially outside the containing element, but on the right), I figured this could only be done with absolute positioning and spans spans or at least p spans

Why don’t you just put the quotes before and after the p element as long as you only have one paragraph (even if you have two you can class them).

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p {
    margin:0
}
blockquote {
    width: 40%;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-size:120%;
    line-height:1.35;
    position:relative;
    padding-left:3em;
    padding-right:3em;
}
blockquote.rt {
    float:right;
}
blockquote.lft {
    float:left;
    left:.3em
}
blockquote p:before, blockquote p:after {
    content: "“ ";
    font-size: 300%;
    font-weight: bold;
    color:#FE9D00;
    line-height:0;
    vertical-align:bottom;
    margin-left:-.8em;
}
blockquote p:after {content: "”";margin:0}
</style>
</head>
<body>
<blockquote class="lft" >
    <p>Vampires are roumored to rather drink blood than beer.&nbsp;</p>
</blockquote>
<blockquote class="lft" >
    <p>Some phrase that is long enough to wrap for  at least  
        two lines and then have the quote at the END of the
        last line but not off bellow  or by itself.&nbsp; </p>
</blockquote>
</body>
</html>

:before and :after mean before the content and after the content so you don’t need to do anything special.

Won’t work in IE7 and under of course.

10

Quotes should not be added with CSS (which btw will also not get caught by screen readers (or, shouldn’t) because the content property is adding, in essence, content as decoration). Most screen readers will announce a blockquote though.

I would use background images like Crusty said.

I disagree with this:

I say keep it out, because the reference to a quote does not belong inside a quote. People aren’t saying “I, Claudius, do declare blah blah…”; they are saying “Blah blah”.
If the reference is online, use the cite attribute of the blockquote element. Otherwise, keep it outside, but as Crusty pointed out it is an inline element.

<blockquote>
<p>Well Ah do declah’!</p>
<p>Upon blind faith, we place reliance</p>
<p>Ah havva feeeevah, and the only prescription… is m0aR jQuery!</p>
</blockquote>
<p><cite>The Hawkman</cite> and <cite>some version of Christopher Walken</cite></p>

OK, don’t pile two quotes in one blockquote with two separate authors, but you can indeed have multiple p’s inside a blockquote, and you can have multiple cites if you are quoting something attributed to multiple authors.

11

Yes good solution Jason :tup: