Need to put a text diagonally in box. using Css

Question

Hi can this be achieved using Css or Javascript? need this for a Birt report.

Answer 1

Other answers are irrelevant because they do not take into consideration this question is in a BIRT context. Short answer is this feature is not natively supported in BIRT. You can do this for labels in charts, but not for other elements such Data, Dynamic text etc.

You could include a css file at view time, and make use of a css rule in a text element declared as "HTML" type, but it is complicated to maintain and this would only work with html outputs: other formats such PDF and Excel would not take css rules into consideration.

Your best option is to make use of this Eclipse project BIRT control libs which extends BIRT in particular with a "diagonal text" control.

Answer 2

CSS:

.lbl{
     width: 80px;
    float:left;
    margin-left: -22px;
    transform:rotate(-50deg);
-ms-transform:rotate(-50deg); /* IE 9 */
-webkit-transform:rotate(-50deg); /* Opera, Chrome, and Safari */}
.inp {
    float: left;
    margin-top: 50px;
}

HTML

<input type='checkbox' id='cb1' class='inp'>
<div class='lbl'><label for='cb1'>first</label></div>

<input type='checkbox' id='cb2' class='inp'>
<div class='lbl'><label for='cb2'>second</label></div>

<input type='checkbox' id='cb3' class='inp'>
<div class='lbl'><label for='cb3'>third</label></div>

<input type='checkbox' id='cb4' class='inp'>
<div class='lbl'><label for='cb4'>fourth</label></div>

JSFIDDLE-DEMO

Answer 3

Something like

.diagonal {
  -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg); 
          transform: rotate(-45deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand');
}

FIDDLE

Answer 4

Well you can define a CSS class with property transform: rotate(); and assign to the the elements that you need to be affected.

check this example in w3schools

to rotate the text from a specific angle

Answer 5

You can use Css property transform: rotate(); to achieve this.

Answer 6

u can simply use transform:rotate(x);

transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */