/    Sign up×
Community /Pin to ProfileBookmark

Problem with writing-mode and filters

Copy linkTweet thisAlerts:
Jul 25.2003

Hi,

I am trying to write some text in a table so that it flows bottom to top, left to right – in other words rotate it 90degrees anti-clockwise.

now, the following style does this for IE 5.5 and above

.vertical
{
writing-mode: tb-rl;
filter: flipv fliph;
}

Now the problem is that IE5.0 recognises the filter bit, but not the writing-mode bit and you end up with text that is upside-down, which is no good at all.

What I would like is to have the full vertical style for IE5.5 and above and no change for everything else.

Is there a way to specify this in CSS?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWJul 25.2003 — I've never seen anyone do that...

The nearest thing I can think of is the direction property, (http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-direction) but that only does left or right.

An image wouldn't be any good?
Copy linkTweet thisAlerts:
@GollumauthorJul 25.2003 — In the end, I discovered that the <CENTER> tag doesn't support filter flipv or fliph in IE5.0, but it does in IE5.5

so if I wrap the text in a <CENTER> tag and apply the style to that, I either get the flip AND the rotate, or I get neither, which is what I want.?
Copy linkTweet thisAlerts:
@pyroJul 25.2003 — You could use the IE only [URL=http://www.javascriptkit.com/howto/cc.shtml]conditional comments[/URL], as you are using an IE only filter, anyway:

&lt;!--[if gte IE 5.5]&gt;
&lt;style type="text/css"&gt;
body {color:red;}
&lt;/style&gt;
&lt;![endif]--&gt;That will keep you from having to use the depreciated <center> tag.
Copy linkTweet thisAlerts:
@GollumauthorJul 28.2003 — Ta Pyro,

I Like that even better!
Copy linkTweet thisAlerts:
@pyroJul 28.2003 — Yeah, me too... ?
×

Success!

Help @Gollum spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...