<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://googleapis.com/css?family=musli">
<title>Tabtest2</title>
<link rel="stylesheet" type="text/css" href="welsh.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#followTab {
/* No bullets */
list-style: none;
/* Position and float the tab */
position: fixed;
z-index: 2;
right: 0;
top: 130px;
/* Give the tab width and padding */
width: 45px;
height: 250px;
padding: 8px 5px;
/* Add the curved white border */
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
/* Add the drop shadow */
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
/* Add the semitransparent gradient background */
background: rgba(140, 223, 255, .75);
background: -moz-linear-gradient(top, rgba(75, 205, 252, .75), rgba(140, 223, 255, .75));
background: -webkit-gradient( linear, left top, left bottom, from( rgba(75, 205, 252, .75) ), to( rgba(140, 223, 255, .75) ) );
background: linear-gradient(top, rgba(75, 205, 252, .75), rgba(140, 223, 255, .75));
filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
}
.vertical-text {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
padding-left: 10px;
margin:0;
padding:0;
}
.vertical-text li {
width: 60px;
}
</style>
</head>
<body>
<ul id="followTab">
<li class="vertical-text"><a href="url">Welsh test</a></li>
</ul>
</body>
</html>
You could try this:
a {white-space: nowrap;}
Hi bobbysocks welcome to the forum
Not that I would know how, but I tried a few things anyway, without success.
(outlines added and no welsh.css file)
It looks like the height and width dimensions are retained and don’t go along with the transform.
So two things are happening, “Welsh” is over-flowing and “test” is moved to a new line.
I’m probably missing something simple, but it’s got me stumped.
EDIT
I missed that. It “works” but it doesn’t feel right to me. For some reason I feel like content should “fit” the container, not overflow.
Hi there bobbysocks,
here s a basic example…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Tabtest2</title>
<style media="screen">
body {
font: 1em/1.5em verdana,arial,helvetica,sans-serif;
}
#followTab {
position: absolute;
z-index: 2;
right: 0;
top: 14em;
margin :0;
width: 16em;
padding: 0;
border: 0.2em solid #fff;
border-top: none;
border-radius: 0 0 0.7em 0.7em;
transform: rotate(90deg) translate(0,-6.5em);
box-shadow: 0 0 0.5em rgba(0,0,0,0.6);
background: linear-gradient(to right,rgba(75,205,252,0.75),rgba(140,223,255,0.75));
list-style: none;
}
#followTab a {
display: block;
line-height: 3em;
font-variant: small-caps;
text-align: center;
text-decoration: none;
}
#followTab span {
display: inline-block;
margin: 0 0.2em;
transform: rotate(-90deg);
}
</style>
</head>
<body>
<ul id="followTab">
<li>
<a href="#">
<span>W</span>
<span>e</span>
<span>l</span>
<span>s</span>
<span>h</span>
<span> </span>
<span>T</span>
<span>e</span>
<span>s</span>
<span>t</span>
</a>
</li>
</ul>
</body>
</html>coothead
I like that better than needing to turn my head sideways 
1 Like
Hi there Mittineague,
personally, I cannot stand any of this stupid “arty-farty” stuff. 
I like web pages that start at the top left corner and then
simply work their way down to the bottom right corner. 
coothead
3 Likes
Is this example considered semantic, etc?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Tabtest3</title>
<style media="screen">
body {
font: 1em/1.5em verdana,arial,helvetica,sans-serif;
}
#followLeft {
z-index: 3;
position: absolute; top: 9em; left: -0.42em;
margin:0;
width: 3em;
border: 0.2em solid #fff; border-top: none;
border-radius: 0 0 0.7em 0.7em;
text-align:center;
background: linear-gradient(to right,rgba(75,205,252,0.75),rgba(140,223,255,0.75));
box-shadow: 0 0 0.5em rgba(0,0,0,0.6);
}
#followLeft a:link {
display:inline-block;
width:2em; padding: 0 0.42em ;
text-align:center;
text-decoration: none;
}
#followLeft a:hover{ background-color:lime;}
</style>
</head>
<body>
<div id="followLeft">
<a href="#">
<br>W<br>e<br>l<br>s<br>h<br><br>T<br>e<br>s<br>t<br><br>
</a>
</div>
</body>
</html>
**Edit:** Added screen dump 
1 Like
Thanks everyone, thats a great help.
I think i’ll go with the no wrap option, although I agree Mittineague it does feel like it should fit within the a tag.
I dont understand why I can get give the a tag a width to stop the wrap around.
it been frustrating me for days.
thanks also for the suggestions to display the letter running top to botton, hadnt even thought about that 
Take a look at my example and notice the display:inline-block; applied to a:link to change it to accept the width block parameter.
Hi Mittineague,
stupid question but where would I put the a {white-space: nowrap;} ???
to make the code work like you’ve displayed above did you use my code and add a {white-space: nowrap;} or did you rewrite the code?
Cheers
Bob
After trying a bunch of other stuff that didn’t work, and then finally seeing ralphm’s post I did
.vertical-text li {
width: 60px;
}
a {white-space: nowrap;}
</style>
I’ve worked it out now, Cheers Mittineague
I’m afraid not.
There is another option I would like better if we can skip older browsers: https://drafts.csswg.org/css-writing-modes-3/
Example from your code, only checked in Chromium:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Tabtest3</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<style media="screen">
html{ font:100%/1.5 verdana,arial,helvetica,sans-serif}
#followLeft{
position:absolute;
top:9em;
right:-0.5em;
border:0.2em solid #fff; border-top:none;
border-radius:0.7em 0 0.7em 0.7em;
box-shadow:0 0 0.5em rgba(0,0,0,0.6);
background:linear-gradient(to right,rgba(75,205,252,0.75),rgba(140,223,255,0.75));
}
#followLeft a{
display:inline-block;
padding:.5em ;
width:2em;
text-decoration:none;
letter-spacing:.2em;
writing-mode:vertical-rl;
text-orientation:upright;
}
#followLeft a:hover{ background-color:lime}
</style>
</head><body>
<div id="followLeft">
<a href="#"> Welsh Test</a>
</div>
</body></html>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.