-moz-orient

by 3 contributors:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -moz-orient CSS property specifies the orientation of the element to which it's applied.

Syntax

-moz-orient:  inline | block | horizontal | vertical

Values

inline
The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.
block
The element is rendered orthogonaly to the axis of the text: vertically for horizontal writing modes, horizontall` for vertical writing modes.
horizontal
The element is rendered horizontally.
vertical
The element is rendered vertically.

Examples

This example displays two progress bars; one horizontal and one vertical.

<html>
<head>
  <title>orient example</title>
  <style type="text/css">
    .vert {
      -moz-orient: vertical;
      width: 16px;
      height: 150px;
    }
  </style>
</head>
<body>
  <p>The following progress meter is horizontal (the default):</p>
  <progress max="100" value="75"></progress>
  <p>The following progress meter is vertical:</p>
  <progress class="vert" max="100" value="75"></progress>
</body>
</html>

View the live example

orient-progress.png

Specifications

Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, -moz-orient).

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 6.0 (6.0) [1] -moz Not supported Not supported Not supported
auto value Not supported 21.0 (21.0) [2]
Removed in 40 (40)
Not supported Not supported Not supported
inline and block values Not supported 40 (40) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported 6.0 (6.0) [1] -moz Not supported Not supported Not supported
auto value Not supported 21.0 (21.0) [2]
Removed in 40 (40)
Not supported Not supported Not supported
inline and block values Not supported 40.0 (40) Not supported Not supported Not supported

[1] In Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there was a bug that causes vertical <progress> elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4).

[2] The auto value was equivalent to horizontal.

See also

Document Tags and Contributors

Contributors to this page: teoli, Sheppy, ethertank
Last updated by: teoli,
Hide Sidebar