Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Text-orientation Property CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 49
    Comment on it

    The text-orientation CSS property defines the orientation of the text in every line.

     

    This property solely has a control in vertical mode, that's once writing-mode isn't horizontal-tb. it's helpful to manage the show of writing in languages victimization vertical script, however conjointly to contend with vertical table headers

     

    Syntax:

    text-orientation: mixed;

    text-orientation: upright;

    text-orientation: sideways;

     

    Values description:

    mixed :ends up in having characters for horizontal-only scripts being turned 90°

    writing-mode: vertical-rl;
    text-orientation: mixed;

     

    upright: results in having characters for horizontal-only scripts to be ordered out naturally (upright). Note that this keyword lead all characters to be thought-about as ltr: the used price of direction is ltr, regardless of the user might attempt to set it to.

    writing-mode: vertical-rl;
    text-orientation: upright;

     

    sideways: This keyword results in having characters arranged out like if they were arranged out horizontally, however with the entire line revolved 90° to the correct if writing-mode is vertical-rl or to the left, if it's vertical-lr.

    writing-mode: vertical-rl;
    text-orientation: sideways;

     

    complete code for demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Text-orientation</title>
    	<style type="text/css">
    		.container{
    			width: 800px;
    		
    			margin: 0 auto;
    			padding: 20px;
    			display: table;
    		}
    		.text{
    			writing-mode: vertical-rl;
    			display: inline-block;
    			color: #219ADF;
    			
    			padding: 20px;
    			width: 88%;
    		}
    		.upright{
    
    			text-orientation: upright;
    		}
    		.sideways{
    			text-orientation: sideways;
    		}
    		.mixed{
    			text-orientation: mixed;
    		}
    		.wrapper{
    			width: 46%;
    			
    			padding: 12px;
    			display: table-cell;
    			text-align: center;
    			color: #219ADF;
    		}
    		.wrapper h2{
    			text-transform: capitalize;
    		}
    		.mixed-rotate, .upright-rotate, .sideways-rotate{
    			transform: rotate(-30deg);
    		}
    	</style>
    </head>
    <body>
    <div class="container">
    	<div class="wrapper">
    		<h2>Simple-text-orientation</h2>
    		<div class="text">
    			<h2 class="mixed">Text-orientation-mixed</h2>
    			<h2 class="upright">Text-orientation-upright</h2>
    			<h2 class="sideways">Text-orientation-sideways</h2>
    		</div>
    		
    	</div>
    	<div class="wrapper">
    		<h2>Text-orientation-rotation</h2>
    		<div class="text">
    			<h2 class="mixed-rotate">Text-orientation-mixed</h2>
    			<h2 class="upright-rotate">Text-orientation-upright</h2>
    			<h2 class="sideways-rotate">Text-orientation-sideways</h2>
    		</div>
    		
    	</div>
    </div>
    </body>
    </html>

    Output:

    Happy Coding :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: