vartical tab? As it is in OS/2

[Zhang Weiwu]

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree, and for ideographs, we need to arrange them
one below the other. I immediately think of using 'writing-mode' style
but soon realized this is an IE-only feature, but my application is
supposed to run on gecko browsers.

Any suggestions on how to do it? I am very sure that I am not the first
one on the earth that wants this effect, so there should be articles
about it on the web, but STFW so far I didn't find yet. In case I found
one such article I'll post URI on this group:)

[Zhang Weiwu]

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree, and for ideographs, we need to arrange them
one below the other. I immediately think of using 'writing-mode' style
but soon realized this is an IE-only feature, but my application is
supposed to run on gecko browsers.

Any suggestions on how to do it? I am very sure that I am not the first
one on the earth that wants this effect, so there should be articles
about it on the web, but STFW so far I didn't find yet. In case I found
one such article I'll post URI on this group:)

Okay, here I find a picture that describes what effect I want:

http://www.evsc.k12.in.us/teachers/h...r/notebook.jpg

I think the reason I didn't find an instruction on the web is I cannot
describ this effect well enough in English and form keywords:(

Drop me any hint?

[Harlan Messinger]

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree,

Before Windows 95 came out, introducing the Task Bar and Start Menu, I
bought a desktop replacement for Windows 3.1 that had vertically tabbed
program groups, and I happened to like them. But I'm curious what
percentage of users would find tabs difficult or a nuisance to read this
way, with the labels rotated 90 degrees.

[snip]

[David Dorward]

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

Most browsers do not have any way in which to rotate text. You could hack
around it by using an image, but I suggest you consider that consistancy is
a virtue when it comes to UI design. While your application may look
pretty, it will also look different - and that tends to worry users.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Spartanicus]

Zhang Weiwu <zh********@realss.com> wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree, and for ideographs, we need to arrange them
one below the other. I immediately think of using 'writing-mode' style
but soon realized this is an IE-only feature, but my application is
supposed to run on gecko browsers.

Any suggestions on how to do it?

Pretty straightforward, you'll have to use images for the tabs with the
text on it, mark them up as list items, float the list to the right
(ideally you'd use a css table for non IE browsers), and specify a right
margin on the content.

The obvious drawbacks are that floating the menu causes the usual
problems, the tab text cannot be enlarged in most browsers, and reading
text that has been rotated 90 degrees is a bother. You can provide some
assistance with the latter by specifying the tab text as title content
on the images.

--
Spartanicus

[Spartanicus]

Spartanicus <[e-mail]> wrote:

Pretty straightforward, you'll have to use images for the tabs with the
text on it, mark them up as list items, float the list to the right
(ideally you'd use a css table for non IE browsers), and specify a right
margin on the content.

This may get you started:
http://www.spartanicus.utvinternet.ie/test/vtabs.htm

It needs a min-height alternative for IE, the regular trick to do that
threw up a quirk in IE that I couldn't be bothered to fix.

--
Spartanicus

[Stan Brown]

"Spartanicus" wrote in comp.infosystems.www.authoring.stylesheets:

Spartanicus <[e-mail]> wrote:

Pretty straightforward, you'll have to use images for the tabs with the
text on it, mark them up as list items, float the list to the right
(ideally you'd use a css table for non IE browsers), and specify a right
margin on the content.

This may get you started:
http://www.spartanicus.utvinternet.ie/test/vtabs.htm

In Mozilla 1.7.5 on Win XP, nothing happens when I click on any of
the tabs.

--

Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/

[Zhang Weiwu]

Harlan Messinger wrote:

Before Windows 95 came out, introducing the Task Bar and Start Menu, I
bought a desktop replacement for Windows 3.1 that had vertically tabbed
program groups, and I happened to like them. But I'm curious what
percentage of users would find tabs difficult or a nuisance to read this
way, with the labels rotated 90 degrees.

Oh if you like me living happily in China, you will find rotating 90
degrees is the 'correct' arrangement and we have been using it happily
for 3000 years:) and the horizonal arrangement is something 'invented'
by the western people :)

[Zhang Weiwu]

David Dorward wrote:

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

Most browsers do not have any way in which to rotate text.

As I said, IE could, with 'writing-mode' style. This style is especially
provided for Asian users. Unfortunately it's not standard. This happens
to be the *only* part of IE that I like.

[Zhang Weiwu]

Spartanicus wrote:

Spartanicus <[e-mail]> wrote:

Pretty straightforward, you'll have to use images for the tabs with the
text on it, mark them up as list items, float the list to the right
(ideally you'd use a css table for non IE browsers), and specify a right
margin on the content.

This may get you started:
http://www.spartanicus.utvinternet.ie/test/vtabs.htm

It needs a min-height alternative for IE, the regular trick to do that
threw up a quirk in IE that I couldn't be bothered to fix.

Oh I like it. It tastes sweet! And I am on mozilla 1.7.5 on Gentoo
Linux, nothing happens if I click a tab. However I'll dig into the code
and see how they made it, and I hope to create a gecko-clickable example
and show-around on this list:)

[Spartanicus]

Zhang Weiwu <zh********@realss.com> wrote:

http://www.spartanicus.utvinternet.ie/test/vtabs.htm

nothing happens if I click a tab

Duh, the links link to the page itself (<a href="#">), it's a mock-up.

--
Spartanicus

[David Dorward]

Zhang Weiwu wrote:

Most browsers do not have any way in which to rotate text.

As I said, IE could

<em> most </em>

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Gus Richter]

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC Magazine
that shows OS/2 is using vertical tab rather than the normal tab
commonly seen on Windows and GNome/KDE. That is the last time I saw
vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is. Recently
I am working on a new web-application where I very much like to
implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree, and for ideographs, we need to arrange them
one below the other. I immediately think of using 'writing-mode' style
but soon realized this is an IE-only feature, but my application is
supposed to run on gecko browsers.

Any suggestions on how to do it? I am very sure that I am not the first
one on the earth that wants this effect, so there should be articles
about it on the web, but STFW so far I didn't find yet. In case I found
one such article I'll post URI on this group:)

http://www.stunicholls.myby.co.uk/menu/book.html
and
http://www.stunicholls.myby.co.uk/book/index.html

--
Gus

[Christoph Paeper]

*Zhang Weiwu* <zh********@realss.com>:

As I said, IE could, with 'writing-mode' style. This style is especially
provided for Asian users. Unfortunately it's not standard.

Well, "not" is a strong word in this case:
<http://www.w3.org/TR/css3-text/#writing-mode>. Although that draft has
now a new editor ("fantasai") and is currently under revision, AFAIK.

Yes, that's right: IE6, which is claimed to be a CSS1 browser with some
support for CSS2, was probably the first browser to support upcoming CSS3
properties (although CSS3 wasn't yet being developped when IE6 was
released and the (former) editor of that module is a Microsoft employee).

--
Three things matter in a speech:
who says it, how he says it, and what he says,
and of the three, the last matters least.

[Zhang Weiwu]

Gus Richter wrote:

Zhang Weiwu wrote:

I remember when I was in high school I saw a Screen shot in PC
Magazine that shows OS/2 is using vertical tab rather than the normal
tab commonly seen on Windows and GNome/KDE. That is the last time I
saw vertical tab.

That tab is very styled and pretty, on the right side. However I never
used OS/2 so I don't even have a screen shot to show how it is.
Recently I am working on a new web-application where I very much like
to implement this effect.

To let the text on the tab title flow top-to-bottom, we need to turn
Latin alphabetic 90 degree, and for ideographs, we need to arrange
them one below the other. I immediately think of using 'writing-mode'
style but soon realized this is an IE-only feature, but my application
is supposed to run on gecko browsers.

Any suggestions on how to do it? I am very sure that I am not the
first one on the earth that wants this effect, so there should be
articles about it on the web, but STFW so far I didn't find yet. In
case I found one such article I'll post URI on this group:)

http://www.stunicholls.myby.co.uk/menu/book.html
and
http://www.stunicholls.myby.co.uk/book/index.html

This is the greatest one I even see!

[Daniel Déchelotte]

Zhang Weiwu a écrit :

| Gus Richter wrote:
|
| > http://www.stunicholls.myby.co.uk/menu/book.html
| > and
| > http://www.stunicholls.myby.co.uk/book/index.html
|
| This is the greatest one I even see!

Pages from this guy (Stu Nicholls) contain some really nice CSS tricks, but
I call most of them MMN: Mystery Meat Navigation[1]. All of them are
"navigation demos", but the fact that his last two tricks (and, to me, the
most impressive ones) are... *mazes* ([2] and [3]) is a sure indication
that one should not use those tricks for navigation on a real website. They
are, again, tricks...

Just my 2 cent warning.

[1] http://www.webpagesthatsuck.com/myst...avigation.html
[2] http://www.stunicholls.myby.co.uk/menu/amazing.html
[3] http://www.stunicholls.myby.co.uk/menu/crossing.html

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Gus Richter]

Daniel Déchelotte wrote:

Zhang Weiwu a écrit :

| Gus Richter wrote:
|
| > http://www.stunicholls.myby.co.uk/menu/book.html
| > and
| > http://www.stunicholls.myby.co.uk/book/index.html
|
| This is the greatest one I even see!

Pages from this guy (Stu Nicholls) contain some really nice CSS tricks, but
I call most of them MMN: Mystery Meat Navigation[1]. All of them are
"navigation demos", but the fact that his last two tricks (and, to me, the
most impressive ones) are... *mazes* ([2] and [3]) is a sure indication
that one should not use those tricks for navigation on a real website. They
are, again, tricks...

Just my 2 cent warning.

[1] http://www.webpagesthatsuck.com/myst...avigation.html
[2] http://www.stunicholls.myby.co.uk/menu/amazing.html
[3] http://www.stunicholls.myby.co.uk/menu/crossing.html

Thanks for this posting. I haven't had a good laugh for a long time.

What you call "tricks", I call "cutting edge css" or "using css at its
full potential". You would call Eric Meyer's pages tricks as well I guess.

There are always those that fear the unknown. Get into the code, analyse
it and find that it is simply applying rules and capabilities. There is
nothing to fear - it is not the work of the devil.

--
Gus

[Daniel Déchelotte]

Gus Richter a écrit :

| Daniel Déchelotte wrote:
| >
| > Pages from this guy (Stu Nicholls) contain some really nice CSS tricks,
| > but I call most of them MMN: Mystery Meat Navigation[1]. All of them
| > are "navigation demos", but the fact that his last two tricks (and, to
| > me, the most impressive ones) are... *mazes* ([2] and [3]) is a sure
| > indication that one should not use those tricks for navigation on a
| > real website. They are, again, tricks...
| >
| > Just my 2 cent warning.
| >
| > [1] http://www.webpagesthatsuck.com/myst...avigation.html
| > [2] http://www.stunicholls.myby.co.uk/menu/amazing.html
| > [3] http://www.stunicholls.myby.co.uk/menu/crossing.html
|
| Thanks for this posting. I haven't had a good laugh for a long time.

Then I am glad. :)

| What you call "tricks", I call "cutting edge css" or "using css at its
| full potential". You would call Eric Meyer's pages tricks as well I
| guess.

Well, I shall elaborate a bit. I am impressed by every single demo, in a
sense of "Funny, how did he do that?".

Now, there are a lot of examples, and a lot of them are things he just
wanted to prove to be feasible using CSS and only CSS.

[ doing the demos again ]
[ now discovering the function of the "up" arrow, which leads to the rest
of his site ]

Oh oh. Now I understand better your indignation when I wrote "Pages from
this guy...". I meant "The demos available from his site...". Okayy, the
site content is awesome (sorry for not finding a better adjective) and not
simply about switching a lamp on and off using CSS. ;-)

| There are always those that fear the unknown. Get into the code, analyse
| it and find that it is simply applying rules and capabilities. There is
| nothing to fear - it is not the work of the devil.

His site is all about accessible content, clean yet browser-robust code,
and my opinion really was ill-conceived. Sorry for the confusion.

--
Daniel Déchelotte
http://yo.dan.free.fr/

[Gus Richter]

Daniel Déchelotte wrote:

Gus Richter a écrit :

| Daniel Déchelotte wrote:
His site is all about accessible content, clean yet browser-robust code,
and my opinion really was ill-conceived. Sorry for the confusion.

I'm sorry that I expressed my amusement. I'm also glad that you had a
second, closer look. For me, it's not so much what he did as an end
product, although it does impress, but it is mainly the technique he
uses to achieve certain results; utilizing 2 or more seemingly straight
forward characteristics in order to achieve a certain result, à la Eric
Meyer's 'complexspiral', which inspired and awed everyone. It is also
the realization that there are untapped techniques not yet realized
(undiscovered) with this relatively new css. Some aspects of the demos,
may of course be found to be useful in certain circumstances as well, as
in the case for the OP. I stumbled onto the site in search of answers to
the same question as that of the OP quite a while ago.

--
Gus
Je m'excuse de t'avoir taquiné, sois certain que c'était sans mechanceté.