Focal Point
How to rotate column title text 90 degrees on HTML report

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/4221068331

May 24, 2005, 09:38 PM
Dennis_V
How to rotate column title text 90 degrees on HTML report
Does anyone know of a technique (CSS or otherwise) that can be used to rotate column title text 90 degrees?

We have an extremely wide HTML report that seems to go out to the right forever and the column titles are making the report so wide.

DRV
May 24, 2005, 09:48 PM
Prarie
Well I'm not sure about that, but how about just changing the TITLE on the Columns?

THISISAWIDECOLUMN AS 'THISISSHORT'

OR you can stack it like

THISISAWIDECOLUMN AS 'THISISA,WIDE,COLUMN'
which will display:

THISISA
WIDE
COLUMN
May 24, 2005, 10:10 PM
Dennis_V
I shouldn't have been so quick to hit the submit button.

The titles are across values (Products) that are wide in most cases.
May 24, 2005, 10:29 PM
Prarie
Well yes, that's a bit different....might try a DECODE if the products are consistent..
May 25, 2005, 01:21 AM
susannah
drv, i've never seen a website anywhere with tilted text, unless its an image. hmmm.
has anyone ?
there's always excel output, and let the user rotate the text in the across row.
or..if this is really important to you, make an image, a gif, for each productname, and rotate it 90. then define a variable
PRODNAME/A100='<img src="http://servername/images/' | MYPROD | '.gif">;
and then
SUM stuff ACROSS PRODNAME
and the character strings will be in order by the var MYPROD but will reference images that are the prod names, turned sideways.
Nuts, yes? I've done nuttier.
May 25, 2005, 04:12 AM
TexasStingray
If you are upgrading to 7.1 and want excel output you can use a template and have WebFOCUS populate the template and if the template has rotated titles then that is what the user would see. There are a lot of great features when using a template like pretecting fields from user changing them. I know this may not be what you are looking for but are words for thought.
May 25, 2005, 07:12 AM
susannah
say, tex, are you on 71?
May 25, 2005, 04:47 PM
Lloyd
Yeah I think Susannah is right, I've only seen verical text as immages.

But How about a pretty stupid idea?

Maybe create a function to take your field values and pop a comma between each character and use that?


..hey I said it was pretyy stupid... Wink
May 25, 2005, 06:32 PM
Dennis_V
I actually found a site that has a javascript example of how to rotate text.

http://www.webreference.com/js/tips/000814.html

I guess my question now is: "Can you use a javascript to accomplish what this script does at report runtime?"
May 25, 2005, 07:12 PM
susannah
SLICK! Thanks drv.
May 26, 2005, 08:02 PM
Lloyd
hey drvander, I couldn't wait to try out your tip, and it ROCKS!

Here's how I did it using inline HTML:


DEFINE FILE CAR
MYCOUNTRY/A50 = '
' | COUNTRY | '
';
END
TABLE FILE CAR
PRINT CAR BY SEATS
ACROSS MYCOUNTRY
ON TABLE SET STYLE *
UNITS=IN, PAGESIZE='LETTER',LEFTMARGIN=0.000000,
RIGHTMARGIN=0.000000,TOPMARGIN=0.000000,
BOTTOMMARGIN=0.000000,
SQUEEZE=ON,ORIENTATION=LANDSCAPE,$
TYPE=REPORT,FONT='ARIAL',SIZE=8,COLOR=
'BLACK',BACKCOLOR=RGB(255 255 224),
STYLE=NORMAL,TOPGAP=0.0,BOTTOMGAP=0.0,$
TYPE=DATA,FONT='ARIAL',SIZE=8,
COLOR='BLACK',BACKCOLOR=( RGB(255 255 224) RGB(210 180 140) ),
STYLE=NORMAL,$
END

This message has been edited. Last edited by: <Mabel>,
May 26, 2005, 10:15 PM
Dennis_V
Awesome example, very cool! Thanks.

I didn't realize you could wrap div tag attributes around a single field, but I do now.
May 27, 2005, 02:24 AM
TexasStingray
No, I am not on 7.1, Wanted to share this information.
May 27, 2005, 08:09 AM
<JG>
Try changing the define to this

MYCOUNTRY/A70 = '<div STYLE="writing-mode: tb-rl;filter: flipv fliph;">' | COUNTRY | '</DIV>';

The filter causes the text to read bottom to top and be left justified which I think is more logical from an English reading point of view

By the way this only works in IE.
May 27, 2005, 04:39 PM
Dennis_V
Wow, even cooler yet!

I agree that this text presentation is much easier to read.

This has some of our Developers real excited...
June 02, 2005, 10:38 PM
susannah
JG, when i try your mode technique, with an SUM SALES BY CAR ACROSS MYCOUNTRY
my labels are all centered...i have tried justify=left, but i can't seem to make them all start from the top border of the report, all start from the same point?
I reference with TYPE=ACROSSVALUE,BY=MYCOUNTRY and i can turnthem red ok, but i can't make them all start from the same place.
Any ideas?
June 03, 2005, 10:41 AM
<JG>
Susan the problem is a combination of using proportional fonts and space handling in HTML.

the solution is a compromise but is as follows (the length of NBS1 and the depth of the decode is dependant on the length of the across field in this case COUNTRY A10)

DEFINE FILE CAR
CP1/A11= COUNTRY ||'/';
CL/I5= POSIT(CP1, 11,'/',1,'I5') -1;
NBS1/A70=DECODE CL (9 '&|nbsp;'
8 '&|nbsp;&|nbsp;'
7 '&|nbsp;&|nbsp;&|nbsp;'
6 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
5 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
4 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
3 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
2 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
1 '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;'
ELSE '&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;&|nbsp;' );
MYCOUNTRY/A180 = '<div STYLE="font: bold 12pt Courier;writing-mode: tb-rl;filter: flipv fliph; ">' | COUNTRY || NBS1 | '</DIV>';
END
June 03, 2005, 01:08 PM
<JG>
POSTSCRIPTUM, Printing the output does not print the displayed output. Either to a printer or acrobat distiller. Only the fliph on the filter is applied. Without the filter it prints as expected.