Angle on Text (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Rocket Boy -> Angle on Text (1/25/2006 9:41:18)

I have been checking at W3Schools with no luck, Is there anyway to use CSS to get a slight angle on one of the P.class's ?

I want to try and get a paragraph that is tilted at a 10 or 15 degree angle.

Thanks in advance.



Tailslide -> RE: Angle on Text (1/25/2006 9:52:50)

Nope not as far as I know.  You'd have to use an image to get that effect.  You could use a background image of a tilted square or whatever  behind the paragraph  - but the text itself would be horizontal as normal.



rdouglass -> RE: Angle on Text (1/25/2006 10:17:08)

It can be done but there's a lot of hand coding and tweaking to do.

Take a look at this site (still under construction):

http://www.rogerdouglass.com/

and put your mouse over the links in the center of the page (on the left for that matter as well.) The ones down the center will display an "angled" textbox on mouseover. Pure CSS and no JavaScript whatsoever on that page. (Not even any IE tweaks! [8D])

Is that kinda what you're trying to do? If so, view the source and look for <div>s that have a class of "noteboxContent" and "noteboxContentSub". I did it using careful placement of divs and appropriate margins along with 1 image that I repeated for each line giving it that angled look.

That any help?

PS. I am in the process of trying to make this dynamic. Currently it is static and I'm working on the recursive loops to separate the text into individual lines with each line being longer than the previous one.



Tailslide -> RE: Angle on Text (1/25/2006 10:19:21)

Sorry I thought you meant you wanted the whole paragraph on a slant - text included!



rdouglass -> RE: Angle on Text (1/25/2006 10:21:05)

quote:

Sorry I thought you meant you wanted the whole paragraph on a slant - text included!


Actually, that's what I'm doing but not using <p> tags and doing a "brute force" method. [;)]



Tailslide -> RE: Angle on Text (1/25/2006 10:27:16)

I must be going blind it looks horizontal to me...!



rdouglass -> RE: Angle on Text (1/25/2006 10:40:04)

quote:

I must be going blind it looks horizontal to me...!


Oh yeah. (Light bulb goes on!) I know what you're saying now. Yup, it is horizontal at that. Maybe I misunderstood. [8|] [;)]

As to the line of text being slanted, I don't know either.



Rocket Boy -> RE: Angle on Text (1/25/2006 10:48:29)

HAHAHA well at least I started a good thread lol

RDouglas.. Your design is excellent, the slanted text boxes will come in in very useful so thanks for the offer. DPF was also right, Ideally I was looking to tilt the entire parapgraph. A complete shift of angle on the entire paragraph so that it is everything in side the tags is slightly rotated.



womble -> RE: Angle on Text (1/25/2006 16:03:55)

I hate to put a downer on things (and I remember when Rodger first posted his new site being very impressed by the clever angled paras), but from an accessibility point of view both having text that starts in a different position on each line, or using angled text is a big problem for people with visual impairments, particualrly those with a limited field of vision or who use magnification software.

Just my $$.

Sorry to spoil the party. I'll go now. [;)]



rdouglass -> RE: Angle on Text (1/25/2006 16:16:12)

quote:

from an accessibility point of view


<hijacking thread mode>

Any suggestions for a solution to this?

</hijacking thread mode>



Rocket Boy -> RE: Angle on Text (1/25/2006 16:28:57)

It does seem like it might be a bit o much hassle for the sake of no more than 10 lines of text. As Tailslide said... a slightly rotated square behdine the text works reasonably well. I like the non-square-box though from rogerdouglas.com, very handy!!

Thanks everyone



womble -> RE: Angle on Text (1/25/2006 16:36:05)

/also activates thread hijacking mode (I have a shortcut key for it on my keyboard) [:D]

I'm afraid apart from "don't do it" I don't think there is, the only thing I can think of is to have an alternative version of the same page. <longdesc> might work for the angled text using an image one, but the link would have to be prominent or viewser with low vision wouldn't struggle that far to see it (Low vision isn't necessarily the same as partially sighted or blind).

Over in the accessibility forum someone posted this thread about accessibility and general useability issues and there are links to some some sites that have lots of info on low vision which may be helpful.



dpf -> RE: Angle on Text (1/25/2006 17:22:12)

quote:

but from an accessibility point of view both having text that starts in a different position on each line, or using angled text is a big problem for people with visual impairments, particualrly those with a limited field of vision or who use magnification software.
i am trying to understand..visualize exactly what the problem would be for them



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625