Solved

Vertical Text Issue

Posted on 2004-10-16
20
413 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
Comment Utility
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
Comment Utility
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
Comment Utility
if u have enough time and u can use php i recommend using the GD library
0
 
LVL 18

Expert Comment

by:arantius
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 125 total points
Comment Utility
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
Comment Utility
Oh, btw - you can do all that just with PHP.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
points to me IMHO

Cd&
0
 
LVL 4

Expert Comment

by:dreamer007
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
How about split the points between the two evenly?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now