You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Orienting an Image on the Page: the 'image-orientation' property</h3>
1491
1491
1492
-
<p>Sometimes images from camera phones, digital cameras or scanners are
1493
-
encoded sideways.
1494
-
For example, the first row of image data can represent the leftmost or
1495
-
rightmost column of image pixels. Furthermore, often such devices have limited
1496
-
resources, and do not have the capability to rotate the image into an upright
1497
-
orientation. However, this type of device may have internal knowledge or can
1498
-
accept input from its user as to the rotational correction to perform.
1499
-
The 'image-orientation' property provides a way to apply an
1500
-
”out-of-band“ rotation to image source data to correctly orient
1501
-
an image.
1502
-
1503
-
<pclass="note">Note this facility is not intended to specify layout
1504
-
transformations such as arbitrary rotation or flipping the image in the
1505
-
horizontal or vertical direction. (See [[CSS3-2D-TRANSFORMS]] for a feature
1506
-
designed to do that.)
1507
-
It is also not needed to correctly orient an image when printing in landscape
1508
-
versus portrait orientation, as that rotation is done as part of layout.
1509
-
(See [[CSS3PAGE]].)
1492
+
<p>If a picture is taken with a camera turned on its side, or a document isn't positioned correctly within a scanner, the resultant image may be "sideways" or even upside-down. The 'image-orientation' property provides a way to apply an "out-of-band" rotation to image soruce data to correctly orient an image.</p>
1493
+
1494
+
<pclass='note'>Note that some devices will "tag" an image with some metadata indicating its correct orientation, so image viewing software can do the necessary transformation themselves. Due to legacy compatibility restraints, browsers are required to ignore this data by default. A future level of this specification is expected to have a value that applies the metadata-specified transformation automatically.</p>
1495
+
1496
+
<pclass="note">Note this facility is not intended to specify layout transformations such as arbitrary rotation or flipping the image in the horizontal or vertical direction. (See [[CSS3-2D-TRANSFORMS]] for a feature designed to do that.)
1497
+
It is also not needed to correctly orient an image when printing in landscape versus portrait orientation, as that rotation is done as part of layout. (See [[CSS3PAGE]].)
1510
1498
It should only be used to correct incorrectly-oriented images.</p>
<p>The 'image-orientation' property must be applied before any other transformations, such as being specified in the ''image()'' function with an opposite directionality to its context, or using CSS Transforms.</p>
1558
1546
1559
-
<pclass="note">Note that in CSS, orientation data encoded in the image
1560
-
(e.g. EXIF data) is ignored. <spanclass="issue">Is this an issue? What
1561
-
do printers do?</span>
1562
-
1563
1547
<divclass="example">
1564
1548
<p>The following example rotates the image 90 degrees clockwise:</p>
0 commit comments