• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 948
  • Last Modified:

Vertical Text

Is there anyway to change the text direction in a table in FrontPage from horizontal to vertical?
0
scottspivey
Asked:
scottspivey
  • 5
  • 5
  • 3
1 Solution
 
rbartzCommented:
One way:

In <head> add this style (or in your CSS)

<style>
.verticle {
  writing-mode: tb-rl;
  filter: flipv fliph;
}
</style>

The use the class in any TD...  the text displays vertically.
0
 
rbartzCommented:
Also, you can try: filter:  flipv flipv; to reverse the effect (Top to bottom, start top right)

You might want to specify your cell width to prevent word wrap...

Other alternatives would be use an image, or javascript.  
0
 
scottspiveyAuthor Commented:
rbartz,

this works, but when the text is flipped vertically it is not nearly as "crisp" as it was horizontal.  the text almost looks blurry.  any ideas?

scott
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
jagadeesh_motamarriCommented:
Hi scottspivey,

Try this....


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<style>
<!--
#verticaltext {writing-mode: tb-rl; filter: flipv fliph;}

-->
</style>
</head>

<body>


<table width="100" border="0">
  <tr>
    <td>&nbsp;</td>
    <td width="1" valign="center" align="center" bgcolor="#9A9846" style="border-top: 1px solid #FFFFFF; padding-top: 0px; padding-bottom: 0px">
<div style="padding-right: 2px; padding-top: 2px; padding-bottom: 2px" id="verticaltext">
<font face="Verdana" color="#FFFFFF">The Convenience you want. The Compliance you need!</font></div></td>
  </tr>

</table>

</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------------------

___Jags
0
 
scottspiveyAuthor Commented:
Jags,

i think i got everything in the way you suggested and it still does not look good.  look at the email here:

www.prospectuscentral.com/email_html/SAIPreConferenceEmail.htm

see if you can find something i am doing wrong.  i am lost in what to do since i am not a programmer.  this is a template that was created for me that i can go in and edit and preform very basic tasks with, but anything that is more than editing or basic is out of my league.

scott
0
 
jagadeesh_motamarriCommented:
Hi scottspivey ,

"The Convenience you want. The Compliance you need!" Is this the text that u wanted to be in vertical format....right?

If your answer is yes....then do this..

I belive the above sentence is in tabular format.  So just apply the style that i provided in my previous example to that row or columns i.e to the <td> tag

___Jags.
0
 
scottspiveyAuthor Commented:
jag,

the text is in vertical format, but the quailty of the text is bad.  did you get a chance to look at the page i posted?  the text is in a vertical format like i want, but the quality of the text is not the same as the quality of the horizontal text.  the email is at this url:

www.prospectuscentral.com/email_html/SAIPreConferenceEmail.htm

scott
0
 
jagadeesh_motamarriCommented:
Hi scottspivey,

Here are a few addresses about CSS3 property "writing-mode" which renders the text vertically:

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/writingmode.asp
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/writingMode. htm
http://www.w3.org/TR/2002/WD-css3-text-20021024/#Progression
http://www.w3.org/TR/2001/WD-css3-text-20010517/#writing-mode


Check out these....if u can get a hint of understanding,your problem should be solved.

___Jags.
0
 
scottspiveyAuthor Commented:
Jags,

maybe i am overlooking something but i don't see anything in these addresses that describes the problem i am having with the text quality being poor.  they do explain the vertical text but that is all i see.

scott
0
 
jagadeesh_motamarriCommented:
Hi Scottspivey,

Exactly... these are major links where u can find information about the vertical text. So I guess this way...sine there is no information provided i don't think there is a solution for your problem. Since the text made to align vertically may be the aspect ratio is decreased which in turn is making the text look different than it has to be.

All i can suggest is try changing the font style and size...



____Jags.
0
 
scottspiveyAuthor Commented:
that makes sense.

thx.
0
 
jagadeesh_motamarriCommented:
:-)

___Jags.
0
 
rbartzCommented:
Scott,

Thanks for the points, sorry I couln't get back to you, I was working.

The suggestion from Jags about font styles is exactly right, the rendering is better with certain fonts and styles.  Experimentation is the only solution for that.

If this is an email that you send to people that you expect to be reading while online for the most part, you might want to consider using a graphic instead. That would solve the quality problem, although it is not as easy to implement and takes more bandwidth.

Regards!

R
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now