CODEWITHSUNDEEP
htmlcss
user2049778
user2049778

Reputation: 21

vertical text in button

So I am new to this and am trying to modify code on a Windows CE device to get text to display vertically in a button.

My code is:

.philips_menu_button { 
BACKGROUND-IMAGE : url(dynalite/images/buttons/philips/Philips_Button_Menu.png); 
TEXT-ALIGN : center; 
WIDTH : 128px; 
HEIGHT : 32px; 
COLOR : #07529c; 
FONT-WEIGHT : 600; 
dynalite-type : button-theme; 
upImage : dynalite/images/buttons/philips/Philips_Button_Menu.png; 
downImage : dynalite/images/buttons/philips/Philips_Button_Menu_pressed.png; 
text-offsety : 0; 
text-offsetx : 0; 
}

and

<dynalite:button style="BACKGROUND-IMAGE: none; POSITION: absolute; WIDTH: 80px; HEIGHT: 70px; FONT-SIZE: 20px; OVERFLOW: hidden; TOP: 230px; LEFT: 700px; dont_layout: true; textid: Button_0001_txt; Button_0001_txt: " id=Button_0001 class="philips_menu_button swap_page" onclick="TouchPanel.GoToPage( './Edit Presets.html')" alpha="False" ATOMICSELECTION="true" text="Edit<br>&#10;Levels">
        <IMG style="POSITION: absolute; VISIBILITY: inherit; TOP: 0px; LEFT: 0px" id=Button_0001_img src=".\dynalite\images\buttons\philips\philips_button_menu.png" width=80 height=70> 
        <IMG style="POSITION: absolute; VISIBILITY: hidden; TOP: 0px; LEFT: 0px" id=Button_0001_img_1 src=".\dynalite\images\buttons\philips\philips_button_menu_pressed.png" width=80 height=70> 
                <DIV style="Z-INDEX: 998; POSITION: absolute; OVERFLOW: visible; TOP: 50%; LEFT: 0px">
                    <DIV style="Z-INDEX: 999; POSITION: relative; WIDTH: 80px; TOP: -50%; LEFT: 0px" id=Button_0001_txt>Edit 
                        <BR>Levels 
                    </DIV>
                </DIV>

Basically the screen is designed to be in landscape orientation but I want to rotate it by 90 degrees. I can handle having to rotate either the buttons or text.

Thanks in advance.

Steve

Upvotes: 2

Views: 3089

Answers (1)

lukeocom
lukeocom

Reputation: 3243

If you want to rotate the button you can use a css approach with transform.. 

<input type="button" value="edit" style="transform:rotate(7deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */"/>

If you want the text to display upright instead of rotated, an option is to use jquery..

html part:

<input type="button" value="edit" id="vert" style="width:1.5em;">

jquery part:

$(document).ready(function() {
         $('#vert').val('e\nd\ni\nt');   
        });

Check it out here.. http://codepen.io/lukeocom/pen/mHnvl

Upvotes: 3

Related Questions