Solved

Vertical Text Issue

Posted on 2004-10-16
20
425 Views
Last Modified: 2012-08-13
Hello all,

I have a question in regards to the formatting of text VERTICALLY. I found out a way to do this through Cascading Style Sheets, however it resulted in 2 issues:

1. When PRINTED, the text comes out corrupted and cannot be read. I would like to find out a way to rectify this.
2. When viewed in all browsers EXCEPT Internet Explorer, the text is only viewable HORIZONTALLY.

Here is an example of a page which uses the vertical formatting. The vertical text has been shown in the bus timetable. I used CSS to do it:

http://www.webfusion.com.au/busways%5Fwebsite%5Fnew/viewtimetable.asp

If someone could please provide me with a solution to the above 2 issues, I would greatly appreciate it. My main issue is the issue regarding the corrupted PRINTING, since many customers will want to print timetables and ensure that it is easily readable.

Here is the tag i am using currently: <DIV STYLE="writing-mode: tb-rl; filter: flipv() fliph();">

Thanks very much for your assistance.

Kind Regards,

Ajay Ayyar
0
Comment
Question by:AjayAyyar
  • 5
  • 5
  • 2
  • +3
20 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12331427
You are using two IE only CSS properties.  There are non-standard, and youare not going to duplicate the behaviour in non-IE browsers.  The printing is corrupt because you are using a non-standard IE hack that is nothing but eye candy, and will not translate correct to print media.

If you want a printable cross-browser version of vertical text, then do it with graphics.

Cd&
0
 
LVL 1

Expert Comment

by:apg88
ID: 12334056
If i may say so, I think it looks better with the horizontal text, it is easier to read.
My recomendation would be to change the Y and X axis.
Have the bus names(?) going down and the bus times going to the right.
It will be alittle taller, but if will work when you print it.
0
 
LVL 4

Expert Comment

by:cachedVB
ID: 12335087
if u have enough time and u can use php i recommend using the GD library
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 18

Expert Comment

by:arantius
ID: 12335810
The only way to get reliable vertical text is to use images.

The properties you used are, as mentioned, IE only.  And as you noticed, they don't work well.
0
 

Author Comment

by:AjayAyyar
ID: 12336236
hey guys

more to my situation, I changed the existing CSS from <DIV STYLE="writing-mode: tb-rl; filter: flipv() fliph();"> to <DIV STYLE="writing-mode: tb-rl;">, and it allows me to print it correctly! The issue however is that the vertical text is shown TOP TO BOTTOM rather than BOTTOM TO TOP which is how I want it.

Is that ANY way you know that would allow me to make the text go from bottom to top, without using the FILTER? The bus company I am doing this for insists that it needs to be this way... All help would be much appreciated.

The use of images would not be practical in my situation since there are thousands of bus stops...which would make it too long to long, and very resource intensive.

Thanking you in advance.

Kind Regards,

Ajay Ayyar


0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12339691
Filters and graphics are it.  There is no other way.  If your customer insists on it then tem you have to use graphics and that it wil double the cost of the project to do the graphics. Then they acn either accept what is possible or pay you to do a bunch of graphics.

Cd&
0
 

Author Comment

by:AjayAyyar
ID: 12343235
Thanks COBOLdinosaur.

Before I accept the answer, I have a final query.

I have heard that it is possible to write a CONTROL in VB.NET or Java to allow the vertical text thing to work. If any of you know any URLs where I could find out info on how to do this, it would be much appreciated. Even 3rd party software to purchase would be fine.

Thank you.

Regards,

Ajay Ayyar
0
 
LVL 4

Expert Comment

by:dreamer007
ID: 12344402
You could have a nice little alphabet. If you get your data from a database, you could parse the route name string into an array. Then, assign something like 8x8px or 10x10px sideways images to the letters, then call the array in reverse, appending the .gif extension and a <br/> to the end of the variable.

At least you only have to create 26 + 26 + 10 + ampersands etc...images.

Well, it would be fun - I've done a few and if you leave 1px white space after the (top), and adjust the image hegiht to suit the letter/case, you can get, well - as good as any fixed space font (if not better!)

Just another way.. if you have a couple of hours to spare.

Lol, let me know if you want my letters.....
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 125 total points
ID: 12347007
Virtually anything can be written as a control and put on a web page as an executable.  However, it will trigger a security alert, and the user will have to allow it.  Because of the amount of malicious code that is delivered that way many users will not accept such code, and for some users, especislly those connecting through corporate networks pages containing such code may be blocked at the firewall.  You might get a little more acceptablility using flash, but that still requires a plugin, that some users will refuse to install. In short, using such a control, will reduce the number of visitors because the site will be considered hostile.  

I don't know of any commercially available product that does what you specifically need you might have to program it yourself.

Cd&
0
 
LVL 4

Expert Comment

by:dreamer007
ID: 12349260
Oh, btw - you can do all that just with PHP.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12744987
points to me IMHO

Cd&
0
 
LVL 4

Expert Comment

by:dreamer007
ID: 12751020
Yup, roger that. Points to the Master.

On another note, AjayAyyar you never replied - we can do this with images... do you want to have a pop at it? No need to do individual images, we can make an alphabet, parse the var for the $destination name, feed it back out as letters of the alphabet in reverse and print the (sideways) images, linebroken - that'd be fun, in PHP.

Not for the points of course - Cd answered the q. - just for the hell of it. ;)

d.
0
 
LVL 4

Expert Comment

by:cachedVB
ID: 12768597
I do not see why he should recieve the points when he just repeats what I stated above:


if u have enough time and u can use php i recommend using the GD library <--- GD Library is for dynamically generating images

Filters and graphics are it.  There is no other way.  If your customer insists on it then tem you have to use graphics and that it wil double the cost of the project to do the graphics. Then they acn either accept what is possible or pay you to do a bunch of graphics. <--- talks about creating graphics
0
 
LVL 4

Expert Comment

by:dreamer007
ID: 12768958
Hi cachedVB,

I undertand what you're saying. In fact this can be done lots of ways with graphics - and the fact is that Cd& said:

If you want a printable cross-browser version of vertical text, then do it with graphics. <== in the very first reply to the post

I do think that CD& may have been refering to a static image, however the result is there - graphics. And it's first.

Personally, I can do this with my alphabet, too - which if the GD library is not available, will run.

If the original poster wants to take me up on this, or you up on your GD solution - fair enough, that could change the outcome. They have failed to respond, and as it stands; CD& has the solution first. IMHO.

d.
0
 
LVL 1

Expert Comment

by:apg88
ID: 12769059
How about split the points between the two evenly?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12769103
Why would there be a split after the user indicated satisfaction with may response, but then failed to grade after I answered their followup?

Cd&
0
 
LVL 4

Expert Comment

by:dreamer007
ID: 12769129
Well, technically that'd be 3 ways, if it were split. I just don't think it's deserved.

Graphics are the answer, all our 2 posts do is suggest implementations of graphics.

The poster already said:

"Thanks COBOLdinosaur.
Before I accept the answer, I have a final query."

Cd& replied, the poster didn't. So I'll run with pinaldave's recommendation, as this statement suggested that the original poster intended to credit Cd& solely and in entirety.

;)

d.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question