Grow your CSS skills. Land your dream job.

CSS3 Idea: Rotation of Page Elements

Published by Chris Coyier

There is discussion about making rotation part of the CSS3. Here are some important points:

There are two types of rotation: rotation that happens during layout (and pushes aside content below it), and rotation that happens after layout.

width: auto on a rotated element means use the available width before rotation.

width: max-intrinsic; rotate: rotate-to-fit-keyword enables the case where we shrinkwrap around the text to find its width and pick the smallest angle that will make that block fit.

width: shrinkwrap uses the available space after rotation, starting with one line and making the block taller and narrower as more content comes in, until it reaches its minimum content width (or min-width).

image-orientation accepts all angles, rounds to nearest increment of 90°, and spec says authors SHOULD NOT specify angles other than increments of 90°.

I feel rotation should absolutely be a part of CSS specs going forward. We should have that kind of design control without having to sacrifice usability.

css3possibilities.gif

Comments

  1. So instead of having to use text images it can just be text??
    That seems cool indeed.

    However it would solve the text problem (text screen, images turned off and text re-size etc) but would it solve the readability issue??

    I can see so many hacks using this for all the wrong reasons. With your examples above, is that how the code will look like?

  2. Right, instead of having to use images the text will be real, editable, highlight-able text. By readability, I meant readability by screen readers, search bots, etc. It certainly will be abused by some the point that it makes sites hard to read, but it’s still a cool technique that I advocate being built into CSS3.

    I believe most of those examples above have been “resolved” meaning that is likely how they will really be in the code. With the exception of the “rotate” above, which as you can see, doesn’t have keywords yet.

  3. Yeah the one problem with CSS and XHTML web design is the boxy shapes we are limited too…

  4. Permalink to comment#

    This would be great!

    What frustrates me is when people come out and say that new techniques and coding options would be ‘abused’ or ‘misused’. What a daft view. I mean, use of colour is abused all the time, but does that mean they should have kept web design colourless?

    I’d also love to see CSS3 allowing us to use images as borders.

  5. @Armen: Great point! I’ve already heard talk about “potential abuses”. That is completely besides the point. It’s like saying forks should be illegal because you could gouge someone eye.

    Images as borders eh? I like it. I’m sure this would open up all kinds of cool possibilities while keeping the markup clean. Cool gradient borders, at the very least.

  6. Permalink to comment#

    Is this something that is actually going to be included in CSS3, or is it just what you would like to see? I think the rotate option would be awesome.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".