-moz-orient

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

css

-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

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

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).