Search code examples
htmlcsstext-renderingtext-stylingtext-rotation

Is there a way to rotate text input?

I have to align a textbox and some text, at about 30 degrees, like this: rotated text

I would like it to work at least in IE and FF. Everything I found on the net deals with image rotation.
Anyone?

Solution

  • There's no good cross-browser solution.

    Latest Webkit supports CSS transformations, that allow such thing in straightforward way.

    There's <foreignContent> in SVG that theoretically would allow to rotate HTML, but it's not widely supported (and where it's supported, it's usually incomplete and buggy).

    I suggest that you change design of the page. Try visual tricks with borders and shadows around the input that make it seem slightly rotated.

    I advise against hacks in Javascript or Flash. Browser's input elements are important for usability. Your hacks may not play well with password managers/autofill, various standard keyboard shortcuts, text selection, etc.