What would be the best way to make a "vertical text" in HTML/CSS?

Asked

Viewed 960 times

4

I would like to know from you how best to do these types of text alignment as in the example (vertical alignment, with letters up, "vertically straight". And vertically aligned with the edge of a crooked DIV) Exemplo de alinhamentos

html css

1 answer

8


Using the properties text-orientation, writing-mode and transform you can get the result you want. Except in the case of transform these are specifications recent, maybe not having support for older versions of browsers.

Observing: These attributes in some browsers make it necessary to use the vendor (prefix). Example: -webkit-text-orientation: upright;.

See working here on jsfiddle.

Reference: MDN - text-orientation

Reference: MDN - writing-mode

Reference: MDN - Transform

Reference: MDN - Vendors/Prefixes

  • Thank you very much devgaspa. It looks very promising, although the regencies do not seem to be a cross-browser neh method. But I will test it yet. Soon I leave a feedback. Thanks

  • @Jonatasamaral Thank you, one observation is that if you look at the fact that the attributes have vendors, it turns out to be a cross-browser method yes, the regency is on account of the old versions of the browsers that do not support these attributes.

  • Maybe I expressed myself badly with "cross browser", but I meant that according to the references would not be supported by all browsers (example in text-orientation: http://imgur.com/OgXiUCv)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.