HighDots Forums  

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

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss i thought styling some quote images around text can be quite simplebut how wrong! in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
liketofindoutwhy
 
Posts: n/a

Default i thought styling some quote images around text can be quite simplebut how wrong! - 10-24-2008 , 03:54 AM






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.



Reply With Quote
  #2  
Old   
Johannes Koch
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 05:01 AM






liketofindoutwhy schrieb:
Quote:
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.)


Reply With Quote
  #3  
Old   
liketofindoutwhy
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 05:30 AM



On Oct 24, 2:01*am, Johannes Koch <k... (AT) w3development (DOT) de> wrote:
Quote:
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.


Reply With Quote
  #4  
Old   
Hendrik Maryns
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 06:03 AM



liketofindoutwhy schreef:
Quote:
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/~hendrik/eclipse64.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


Reply With Quote
  #5  
Old   
liketofindoutwhy
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 06:30 AM



On Oct 24, 3:03*am, Hendrik Maryns <gtw37b... (AT) sneakemail (DOT) com> wrote:
Quote:
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.



Reply With Quote
  #6  
Old   
Daniel Jung
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 06:37 AM



liketofindoutwhy wrote:
Quote:
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


Reply With Quote
  #7  
Old   
liketofindoutwhy
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 06:47 AM



On Oct 24, 3:37*am, Daniel Jung <j... (AT) uib (DOT) no> wrote:
Quote:
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.


Reply With Quote
  #8  
Old   
Daniel Jung
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 07:08 AM



liketofindoutwhy wrote:
Quote:
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







Reply With Quote
  #9  
Old   
liketofindoutwhy
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 07:19 AM



On Oct 24, 4:08*am, Daniel Jung <j... (AT) uib (DOT) no> wrote:
Quote:
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).





Reply With Quote
  #10  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: i thought styling some quote images around text can be quitesimple but how wrong! - 10-24-2008 , 11:32 AM



liketofindoutwhy wrote:
Quote:
On Oct 24, 4:08 am, Daniel Jung <j... (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.

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.



Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.