-moz-orient CSS property
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The -moz-orient CSS property specifies the orientation of the element to which it's applied.
Syntax
-moz-orient: inline;
/* Global values */
-moz-orient: inherit;
-moz-orient: initial;
-moz-orient: revert;
-moz-orient: revert-layer;
-moz-orient: unset;
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 orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.
horizontal-
The element is rendered horizontally.
vertical-
The element is rendered vertically.
Formal definition
| Initial value | inline |
|---|---|
| Applies to | any element; it has an effect on <progress> and <meter>, but not on <input type="range"> or other elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
-moz-orient =
inline |
block |
horizontal |
vertical
Examples
HTML
<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>
CSS
.vert {
-moz-orient: vertical;
width: 16px;
height: 150px;
}
Result
Specifications
Not part of any standard. 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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-moz-orient
|
|
|
|
|
|
|
|
|
|
|
|
|
block value
|
|
|
|
|
|
|
|
|
|
|
|
|
inline value
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.