i thought styling some quote images around text can be quite simplebut how wrong!

On 2008-10-24, Daniel Jung <jung (AT) uib (DOT) no> wrote:

liketofindoutwhy wrote:
is your method the same as what I suggest
in Style 1b on that page?

Oh, sorry, yes, it would be the same. I had forgotten that one when I
came down to your last example.

I don't think you can achieve what you want with HTML and CSS (2.1) -
there seems to be a (mental) if- or unless-condition (quote never as the
first element on a line) which would be hard, or impossible, to achieve
with these non-programming languages.

You could try something like this:

q:before, q:after
{
content: '"';
background: url(quote.png);
color: rgba(0, 0, 0, 0);
/* padding: ? */
}

<q>quoted text</q>

For browsers that don't support :before and :after, this might work:

span.quote
{
background: url(quote.png);
color: rgba(0, 0, 0, 0);
/* padding: ? */
}

<span class="quote">"</span>quoted text<span class="quote">"</span>

You can do separate left and right quotes of course, and you might need
to experiment with padding to make room for the images.

The difference between this and Jonathan's solution is that the text is
"Hello" for line-breaking purposes, but the "s are replaced with the
background image. So you shouldn't get quotes on the next line.

This requires support for CSS3 rgba colours, but I think most of the
main browsers do support them.

On Oct 24, 6:29*am, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk> wrote:

liketofindoutwhy <liketofindout... (AT) gmail (DOT) com> writes:
to simply add two quote images around some text. seems quite simple at
first but turns out all the obvious solutions are not as desirable as
a perfect solution:

please see
http://www.0011.com/css/quote.html

basically, Style 1 is just inlining the image, text, and image.

Style 2 is using a table.

Style 3 is using images as background.

None of them actually is perfect... it seems so easy at first...
anyone know a way to make it work at all? thanks.

How about:http://www.bsb.me.uk/testing/quotes.html(re-size window to
test the wrapping).

so far i have tried Ben Bacarisse's solution and it works great! I
will try the other suggested solutions later on. thanks for all the
answers. Thanks for the benchmarking by Harlan Messinger as well. I
think if it can be done purely in CSS it might be best. Otherwise,
tweaking HTML markups, and even PHP might be a second and third
options. By the way, is C# compiled into machine code? I think PHP
is at best compiled into bytecode. thanks.

On Oct 24, 6:29*am, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk> wrote:

How about:http://www.bsb.me.uk/testing/quotes.html(re-size window to
test the wrapping).

wow, it worked like Magic! It is brilliant! I don't fully understand
why the right quote image with the negative right margin won't be in
the normal flow and get pushed down to a line all by itself yet, but I
tried it in IE 6, 7, FF3, Chrome, Safari, and they all worked! I
think if Ben Bacarisse is in the medical field, then the cure for
cancer won't be far.

On Oct 24, 6:29*am, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk> wrote:

How about:http://www.bsb.me.uk/testing/quotes.html(re-size window to
test the wrapping).

wow, it worked like Magic! It is brilliant! I don't fully understand
why the right quote image with the negative right margin won't be in
the normal flow and get pushed down to a line all by itself yet, but I
tried it in IE 6, 7, FF3, Chrome, Safari, and they all worked! I
think if Ben Bacarisse is in the medical field, then the cure for
cancer won't be far.

On Oct 24, 6:29*am, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk> wrote:

How about:http://www.bsb.me.uk/testing/quotes.html(re-sizewindow to
test the wrapping).

I think I understand Ben Bacarisse's solution more. When an element
has a width of 20px, and then we give it a margin-right: -20px, then
it is like a phantom -- it doesn't have any width any more. So it
just unconditionally stick to the right side of the previous text.

the same is for an element with height 20px. if we specify margin-
top: -20px, then it unconditionally shift itself upward to overlap any
element, if any. and it is like it has no height any more.

the padding of 20px (or more) is so that the phantom element is not
overlapping anything. the solution is really brilliant.

In article
<f0b1ddb9-2540-4f29-93b4-ecc4cd80dadf (AT) 40g2000prx (DOT) googlegroups.com>,
liketofindoutwhy <liketofindoutwhy (AT) gmail (DOT) com> wrote:

to simply add two quote images around some text. seems quite simple at
first but turns out all the obvious solutions are not as desirable as
a perfect solution:

please see
http://www.0011.com/css/quote.html

I hope you are intending to let the image resize with the text size of
the user, otherwise there is a nasty problem of 'fit' which is not
merely that the quotes are too big or too small for the text but that
the whole last line can seem to have a different line height to the rest
of the quoted lines because the image of the closing quote will demand
the space.

--
dorayme