/    Sign up×
Community /Pin to ProfileBookmark

Vertical Text Display Spacing

Copy linkTweet thisAlerts:
Sep 08.2009

The following works fine for my purposes, but I don’t know how to reduce the horizontal space between the vertical text displays.

Any ideas? I commented my attempts thus far.

And, ideally, I would like to align the vertical text either at the top or bottom.

[code]
<html>
<head>
<title>Rotated Text</title>

<style type=”text/css”>
/* From: http://www.kavoir.com/2009/08/css-rotate-text-image-elements-by-90-180-or-270-degrees.html */

#rotate span {
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
filter: flipv();

/* following does not seem to have any effect */
/*
width:1.5em;
padding:0px;
margin:0px;
*/
border:1px solid blue; /* for demonstration purposes */
}
</style>
</head>
<body>

<h1>Rotated Text Example Test</h1>
<p>Regular text<p>&nbsp;

<div id=”rotate”>
<span>Rotated Text</span>
<span>More Rotated Text</span>
<span>Even More Rotated Text</span>
</div>

</body>
</html>
[/code]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@adderliteSep 08.2009 — What goal are you shooting for by using rotated text? Not only is it difficult to read, but of the four browsers that I have installed, your example worked only in Firefox. Personally, if I felt that this type of effect was ABSOLUTELY necessary, I would use an image instead.
Copy linkTweet thisAlerts:
@JMRKERauthorSep 08.2009 — Images were my 2nd choice and will go that route if necessary.

At this time I had only checked in FF and relied on source referenced to not be overly optimistic.

Where I was going to use it was as a substitute for the vertical displays of

this: http://javascript.internet.com/text-effects/fly-out-textbox.html
Copy linkTweet thisAlerts:
@adderliteSep 08.2009 — If you don't intend on the subject of the content in each section to change periodically, then I would most definitely go with images.

Also, there are other ways of displaying fairly good amounts of text in small areas. Not that I'm telling you not to use that. Just letting you know that you always have options. ?
Copy linkTweet thisAlerts:
@JMRKERauthorSep 09.2009 — Thanks for the information 'adderlite'.
Copy linkTweet thisAlerts:
@criterion9Sep 09.2009 — You might try adjusting the "line-height" of your element. 1em should be plenty to emulate the link provided.
Copy linkTweet thisAlerts:
@JMRKERauthorSep 09.2009 — You might try adjusting the "line-height" of your element. 1em should be plenty to emulate the link provided.[/QUOTE]

Thanks. I tried the following with no noticable change in the display.
<i>
</i>#rotate span {
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
filter: flipv();

/* following does not seem to have any effect */
/*
width:1.5em;
padding:0px;
margin:0px;
*/
line-height: 1em;

border:1px solid blue; /* for demonstration purposes */
}
Copy linkTweet thisAlerts:
@criterion9Sep 09.2009 — Maybe try letter-spacing?
×

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...