Text on a curve with CSS? - GoFuckYourself.com

Pornweaver · 11-28-2004, 08:34 AM

Is it possible? If so, please list examples.

who · 11-28-2004, 08:36 AM

Ooh... No.

Pornweaver · 11-28-2004, 08:46 AM

Quote:

Originally posted by .?.
Ooh... No.

I didn't think so. It would be nice though.

ronbotx · 11-28-2004, 10:18 AM

I can't think of an easy way to do this with CSS. You would have to use CSS2 and use direct X,Y positioning for all the elements... a real pain.

I think this is much easier accomplished using PhotoShop or Fireworks, but you will end up with a graphic.

Here is a simple example in Fireworks..
http://wonders.eburg.wednet.edu/Wond...es/CurText.htm

Pornweaver · 11-28-2004, 10:20 AM

Quote:

Originally posted by ronbotx
I can't think of an easy way to do this. You would have to use CSS2 and use direct X,Y positioning for all the elements.

I think this is much easier accomplished using PhotoShop or Fireworks, but you will end up with a graphic.

Here is a simple example in Fireworks..
http://wonders.eburg.wednet.edu/Wond...es/CurText.htm

I know it can be done in most graphic applications, I was looking for a way to do it with code.

ronbotx · 11-28-2004, 10:31 AM

Here is an example of a curved NAV bar only using Javascript & CSS...

http://www.orderedlist.com/examples/the_bend

Pornweaver · 11-28-2004, 10:34 AM

Quote:

Originally posted by ronbotx
Here is an example of a curved NAV bar only using Javascript & CSS...

http://www.orderedlist.com/examples/the_bend

Yeah, that's using graphics though. I don't think it's really possible without some crazy algorithms to draw the line with text justifications and kerning. The other problem would be character rotation. I've accomplished text fields on a curve in flash, but that's about it.

ronbotx · 11-28-2004, 10:44 AM

It still has one graphic, you're right. That was the closest example I could find. Perhaps as CSS evolves there will be an easier way to to this.

When I try to get really fancy with CSS, I notice that I intoduce all sorts of cross browser issues. I'll be on the lookout for a pure CSS solution, but I was not able to find one during my cursory searches.

Good luck.

chodadog · 11-28-2004, 10:48 AM

Pretty sure you can do it with DHTML.

Pornweaver · 11-28-2004, 10:53 AM

Quote:

Originally posted by ronbotx
It still has one graphic, you're right. That was the closest example I could find. Perhaps as CSS evolves there will be an easier way to to this.

When I try to get really fancy with CSS, I notice that I intoduce all sorts of cross browser issues. I'll be on the lookout for a pure CSS solution, but I was not able to find one during my cursory searches.

Good luck.

Thx!

11-28-2004, 08:34 AM	#1
Pornweaver Confirmed User Join Date: Aug 2004 Posts: 855	Text on a curve with CSS? Is it possible? If so, please list examples.

11-28-2004, 10:18 AM	#4
ronbotx Registered User Join Date: Jan 2002 Posts: 1,634	I can't think of an easy way to do this with CSS. You would have to use CSS2 and use direct X,Y positioning for all the elements... a real pain. I think this is much easier accomplished using PhotoShop or Fireworks, but you will end up with a graphic. Here is a simple example in Fireworks.. http://wonders.eburg.wednet.edu/Wond...es/CurText.htm Last edited by ronbotx; 11-28-2004 at 10:20 AM..

11-28-2004, 10:48 AM	#9
chodadog Confirmed User Join Date: Apr 2002 Posts: 9,736	Pretty sure you can do it with DHTML. __________________ 26 + 6 = 1

11-28-2004, 08:36 AM	#2
who So Fucking Banned Join Date: Aug 2003 Location: ICQ #23642053 Posts: 19,593	Ooh... No.

11-28-2004, 10:31 AM	#6
ronbotx Registered User Join Date: Jan 2002 Posts: 1,634	Here is an example of a curved NAV bar only using Javascript & CSS... http://www.orderedlist.com/examples/the_bend

11-28-2004, 10:44 AM	#8
ronbotx Registered User Join Date: Jan 2002 Posts: 1,634	It still has one graphic, you're right. That was the closest example I could find. Perhaps as CSS evolves there will be an easier way to to this. When I try to get really fancy with CSS, I notice that I intoduce all sorts of cross browser issues. I'll be on the lookout for a pure CSS solution, but I was not able to find one during my cursory searches. Good luck.