473,625 Members | 2,662 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
17 2054
liketofindoutwh y 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
On Oct 24, 2:01*am, Johannes Koch <k...@w3develop ment.dewrote:
liketofindoutwh y 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
liketofindoutwh y 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:befo re,blockquote:a fter {
color: #5f04b4;
display: block;
font-size: 500%;
height: 1ex;
}

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

blockquote:afte r {
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
On Oct 24, 3:03*am, Hendrik Maryns <gtw37b...@snea kemail.comwrote :
>
Seehttp://tcl.sfs.uni-tuebingen.de/~hendrik/eclipse64.shtml on 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
liketofindoutwh y 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
On Oct 24, 3:37*am, Daniel Jung <j...@uib.nowro te:
liketofindoutwh y 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
liketofindoutwh y 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
On Oct 24, 4:08*am, Daniel Jung <j...@uib.nowro te:
liketofindoutwh y 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
liketofindoutwh y <li************ **@gmail.comwri tes:
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

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
23002
by: lawrence | last post by:
In my style sheet I've set the links like this: a:link{ text-decoration:none; } I did that for the pseudo classes and I also did that for the image tag. Yet there are still link lines around the images. Why? It's on this page:
5
31439
by: Richard Barnet | last post by:
I'm trying to style a line break, something like this: <br class="spacer" /> via CSS, but none of the following seems to have any effect. Any ideas? br.spacer { clear: both; height: 50px; margin-bottom: 20px;
10
2519
by: Thomas Mlynarczyk | last post by:
Hi, Can I style the root element (HTML) just like any other (and will it work as expected) or are there restrictions to take into account? Thanks in advance, Thomas
3
4343
by: Garmt de Vries | last post by:
On the website of the Dutch Jules Verne Society (www.jules-verne.nl), we have several forms that visitors can use to order something, or to apply for membership. Of course, a form's primary purpose is to be filled out online, but I can imagine, for example, one of our members giving a talk and printing a pile of application forms to hand out to the audience. I am trying to add some specific styles in the print stylesheet so the forms...
16
4901
by: Dany | last post by:
Our web service was working fine until we installed .net Framework 1.1 service pack 1. Uninstalling SP1 is not an option because our largest customer says service packs marked as "critical" by Microsoft must be installed on their servers. Now german Umlaute (, , ) and quotes are returned incorrectly in SOAP fault responses. This can be easily verified: Implement the following in a web service method (just raises a SOAPException with a...
61
4717
by: phil-news-nospam | last post by:
Why does SVG need a different tag than other images? IMHO, SVG should be implemented as an image type just like any other image type, allowing it to work with <img> tags, and ... here is the important part ... also work with backgrounds in other tags. I fail to see any wisdom in making SVG different than say PNG (of course the implementation of the rendering code would obvious be different). --
6
2292
by: ashkaan57 | last post by:
Hi, How can I set up the styling for different levels of <ULto use different images for bullets, be indenetd differently, ... Like: .. list 1 - item 1 - item 2 .. list 2
9
2155
by: JT | last post by:
Here is the overall structure I will be referring to: End-program ProvideWorkFlow.dll Forms and methods that properly manipulate calls to methods in AccessUtils AccessUtils (a web service) Hide.dll methods and data I want to remain hidden I have a DLL, Hide.dll, that contains methods that I want to handle for
3
3197
by: nicky77 | last post by:
Hi, before you say it i know frames are bad practice - but i'm developing dynamic content on a site which has already been designed, so alas there's no option but to use them. Anyway, I just want to add simple styling to the scrollbar of the left hand frame of the page, but the styling i've applied isn't working for some reason. The site is at http://www.maguiresonline.co.uk/new_website/index.html It's the scrollbar in the middle of the...
0
8251
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look ! Part I. Meaning of...
0
8688
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8635
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8352
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8494
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6115
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
2614
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1800
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
2
1496
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.