By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,269 Members | 1,332 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,269 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.
Oct 24 '08 #1
Share this Question
Share on Google+
17 Replies


P: n/a
liketofindoutwhy schrieb:
to simply add two quote images around some text.
[...]
anyone know a way to make it work at all? thanks.
Use the appropriate characters instead of images?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Oct 24 '08 #2

P: n/a
On Oct 24, 2:01*am, Johannes Koch <k...@w3development.dewrote:
liketofindoutwhy schrieb:
to simply add two quote images around some text.
[...]
anyone know a way to make it work at all? thanks.

Use the appropriate characters instead of images?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
* * * * * * * * * * * * * * *(Te Deum, 4th cent.)
thanks for your answer. i think using a quote character should work,
since most browser won't wrap a quote character all by itself to a
newline. however, what if your boss tell you to use an image that is
drawn by a fancy font that is not on most people's Operating system,
or a quote with some texture, or a quote with some shadow? thanks
again.
Oct 24 '08 #3

P: n/a
liketofindoutwhy schreef:
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.
This probably won’t work on some lesser browsers, but:

/* Big curly quotes around block quote */
blockquote {
padding-right: 1em;
padding-left: 1em;
margin-top: 1em;
margin-right: 5em;
margin-left: 5em;
margin-bottom: 1em;
}

blockquote:before,blockquote:after {
color: #5f04b4;
display: block;
font-size: 500%;
height: 1ex;
}

blockquote:before {
content: open-quote;
margin-left: -0.5em;
margin-bottom: -1ex;
}

blockquote:after {
content: close-quote;
margin-top: -1ex;
margin-right: -0.5em;
text-align: right;
}

And then somewhere higher up (probably in body):

quotes: '“' '”' '‘' '’';

See http://tcl.sfs.uni-tuebingen.de/~hen...clipse64.shtml on what it
looks like.

I didn’t think of all of this by myself, but I forgot to write down
where I got it. It was a mixture of CSS-sites though, some with images,
some with quotes.

H.
--
Hendrik Maryns
http://tcl.sfs.uni-tuebingen.de/~hendrik/
==================
Ask smart questions, get good answers:
http://www.catb.org/~esr/faqs/smart-questions.html
Oct 24 '08 #4

P: n/a
On Oct 24, 3:03*am, Hendrik Maryns <gtw37b...@sneakemail.comwrote:
>
Seehttp://tcl.sfs.uni-tuebingen.de/~hendrik/eclipse64.shtmlon what it
thanks for your reply. I need the ending quote to be *right next* to
the ending text. so if the last line is only half of the line in
width, the ending quote needs to be in the center of that line.

Oct 24 '08 #5

P: n/a
liketofindoutwhy wrote:
to simply add two quote images around some text.
Just an idea: If you are fetching the quote dynamically anyway, can't
you explode the quote, take the last word and put it in a non-breakable
span (or inline div) together with the rightquote gif, then concatenate
the whole thing again? This is not tested, and just an idea.

- Daniel
Oct 24 '08 #6

P: n/a
On Oct 24, 3:37*am, Daniel Jung <j...@uib.nowrote:
liketofindoutwhy wrote:
to simply add two quote images around some text.

Just an idea: If you are fetching the quote dynamically anyway, can't
you explode the quote, take the last word and put it in a non-breakable
span (or inline div) together with the rightquote gif, then concatenate
the whole thing again? This is not tested, and just an idea.

- Daniel
thanks for your post also... is your method the same as what I suggest
in Style 1b on that page? hm... i think that will work but it is
quite an overkill... and it gives the server a lot of work to go thru
the string every time. but thanks.
Oct 24 '08 #7

P: n/a
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.

I tried a little bit with the :after thing, but it dosn't react to nbsp
- neither in itself nor before it (as the last char in the quote itself.

Seems like you are stuck with using a programming language. That said, I
can't really see why that should represent such a big CPU-issue (you're
not on a Commodore 64-server, are you? The strings are fetched anyway,
right? Why not put the images around the string in the scripting language?

- Daniel

Oct 24 '08 #8

P: n/a
On Oct 24, 4:08*am, Daniel Jung <j...@uib.nowrote:
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.

I tried a little bit with the :after thing, but it dosn't react to nbsp
- neither in itself nor before it (as the last char in the quote itself.

Seems like you are stuck with using a programming language. That said, I
can't really see why that should represent such a big CPU-issue (you're
not on a Commodore 64-server, are you? The strings are fetched anyway,
right? Why not put the images around the string in the scripting language?

- Daniel
haha funny... the servers we use are based on Superboard II... hm...
maybe if the string is scanned backward for the space character that
will be faster. otherwise, if the page has 20 of such quotations, and
each quotation is 80 to 500 words, and 500,000 people use the server
each day, then they can add up! oh yeah... i might be able to do that
by javascript, so that it happens on the user's machine instead. (and
if no javascript enabled, then just a different format... no big
deal).

Oct 24 '08 #9

P: n/a
liketofindoutwhy <li**************@gmail.comwrites:
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).

--
Ben.
Oct 24 '08 #10

P: n/a
liketofindoutwhy wrote:
On Oct 24, 4:08 am, Daniel Jung <j...@uib.nowrote:
>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.

I tried a little bit with the :after thing, but it dosn't react to nbsp
- neither in itself nor before it (as the last char in the quote itself.

Seems like you are stuck with using a programming language. That said, I
can't really see why that should represent such a big CPU-issue (you're
not on a Commodore 64-server, are you? The strings are fetched anyway,
right? Why not put the images around the string in the scripting language?

- Daniel

haha funny... the servers we use are based on Superboard II... hm...
maybe if the string is scanned backward for the space character that
will be faster. otherwise, if the page has 20 of such quotations, and
each quotation is 80 to 500 words, and 500,000 people use the server
each day, then they can add up! oh yeah... i might be able to do that
by javascript, so that it happens on the user's machine instead. (and
if no javascript enabled, then just a different format... no big
deal).
In C#, rather than PHP, I ran a simulation of 10 million iterations on a
210-word sentence, into which I stuck a random lower-case letter in the
middle each time to avoid having the compiler optimize the whole
operation into a constant, and then searched for the last word and
wrapped it in span tags. It took 55 seconds.

Oct 24 '08 #11

P: n/a
On 2008-10-24, Daniel Jung <ju**@uib.nowrote:
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.
Oct 24 '08 #12

P: n/a
On Oct 24, 6:29*am, Ben Bacarisse <ben.use...@bsb.me.ukwrote:
liketofindoutwhy <liketofindout...@gmail.comwrites:
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.
Oct 24 '08 #13

P: n/a
On Oct 24, 6:29*am, Ben Bacarisse <ben.use...@bsb.me.ukwrote:
>
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.

Oct 24 '08 #14

P: n/a
liketofindoutwhy <li**************@gmail.comwrites:
On Oct 24, 6:29*am, Ben Bacarisse <ben.use...@bsb.me.ukwrote:
>>
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.
Steady on -- it's only CSS. It works, I think, because the image ends
up with no width (take the padding off the div and you'll see).

I am glad it works for you, but I think the whole notion has serious
problems. Using an image of a typographical device seems wrong. For
that reason I prefer the other Ben's solution.

--
Ben.
Oct 24 '08 #15

P: n/a
On Oct 24, 6:29*am, Ben Bacarisse <ben.use...@bsb.me.ukwrote:
>
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.

Oct 24 '08 #16

P: n/a
On Oct 24, 6:29*am, Ben Bacarisse <ben.use...@bsb.me.ukwrote:
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.

Oct 25 '08 #17

P: n/a
In article
<f0**********************************@40g2000prx.g ooglegroups.com>,
liketofindoutwhy <li**************@gmail.comwrote:
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
Oct 25 '08 #18

This discussion thread is closed

Replies have been disabled for this discussion.