Forums
This topic is locked
CSS vertically displaying text
Posted 12 Nov 2004 01:18:32
1
has voted
12 Nov 2004 01:18:32 Simon Martin posted:
Hi all,Is there anyway to display text vertically using CSS?
I have a site design that calls for the titles being shown rotated through 90degrees - so you'd have to turn your head to the side in order to read them.
So far the only solution I have found works only in our favourite browser IE! But I would really like to find a solution that works in all browsers and uses semantically correct mark up too - who says we don't like a challenge eh?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#vert {
writing-mode: tb-rl;
filter: flipv fliph;
width:20px;
height:350px;
}
</style>
</head>
<body>
<div id="vert"> This is some vertical text : This is some vertical text</div>
</body>
</html>
Answers on a postcard
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
Replies
Replied 12 Nov 2004 11:31:38
12 Nov 2004 11:31:38 Janusz Jasinski replied:
Mozilla correctly ignores is at it isn't part of the current w3.orgs css standard - it isn't adviceble to use proprietary style in your css. stick to the standards. Have you tried viewing it in Opera/Avant?
Janusz
Yup - janusz.co.uk
Janusz
Yup - janusz.co.uk
Replied 12 Nov 2004 12:03:12
12 Nov 2004 12:03:12 Simon Martin replied:
Exactly, my question is how to achieve the effect I want by sticking to the standards rather than using code that only works in IE.
Or can it simply not be done using CSS at all. The alternative being to use images, but then I dont want to bloat my pages by including an graphic that doesn't need to be there
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
Or can it simply not be done using CSS at all. The alternative being to use images, but then I dont want to bloat my pages by including an graphic that doesn't need to be there
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
Replied 12 Nov 2004 13:51:48
12 Nov 2004 13:51:48 Janusz Jasinski replied:
Hi,
as it's not a standard, you can't implement it using standards.... U could always use images with a text alternative.... why do you want the user to have to bend their neck to read text?
Janusz
Yup - janusz.co.uk
as it's not a standard, you can't implement it using standards.... U could always use images with a text alternative.... why do you want the user to have to bend their neck to read text?
Janusz
Yup - janusz.co.uk
Replied 12 Nov 2004 14:39:32
12 Nov 2004 14:39:32 Simon Martin replied:
The creative for the site calls for a title that runs up the left margin of the page - so if it could be done that's what I was aiming to do.
I fully agree we should be sticking to the standards, but I wasn't asking how to break or bend the standards rather how to achieve the effect in a standards compliant way. I think we should be pushing CSS along and trying new techniques and designs rather than accepting there are somethings we can't do. The articles on A List Apart and other sites are showcasing new ways to implement CSS and developing ways to replicate some of the effects we've been able to achieve for sometime e.g. boxes with curved edges.
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
I fully agree we should be sticking to the standards, but I wasn't asking how to break or bend the standards rather how to achieve the effect in a standards compliant way. I think we should be pushing CSS along and trying new techniques and designs rather than accepting there are somethings we can't do. The articles on A List Apart and other sites are showcasing new ways to implement CSS and developing ways to replicate some of the effects we've been able to achieve for sometime e.g. boxes with curved edges.
Sharing knowledge saves valuable time!
Simon
[DWMX 2004]|[SQL]|[ASP/VBScript]|[XP-Pro]
Replied 12 Nov 2004 15:06:07
12 Nov 2004 15:06:07 Janusz Jasinski replied:
Sorry - I did sound a tad bit rude...
CSS-3 will bring it to usa s far as I'm aware, along with table based designs with columns and stuff.... roll on 2005!
Janusz
Yup - janusz.co.uk
CSS-3 will bring it to usa s far as I'm aware, along with table based designs with columns and stuff.... roll on 2005!
Janusz
Yup - janusz.co.uk