Skip to content

Commit 9a4887a

Browse files
committed
Rewrite the intro to image-orientation to be clearer about data-based orientation versus metadata-based orientation.
1 parent 87f4d18 commit 9a4887a

2 files changed

Lines changed: 18 additions & 35 deletions

File tree

css3-images/Overview.html

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2283,17 +2283,20 @@ <h3 id=image-orientation><span class=secno>6.2. </span> Orienting an Image
22832283
on the Page: the &lsquo;<a href="#image-orientation0"><code
22842284
class=property>image-orientation</code></a>&rsquo; property</h3>
22852285

2286-
<p>Sometimes images from camera phones, digital cameras or scanners are
2287-
encoded sideways. For example, the first row of image data can represent
2288-
the leftmost or rightmost column of image pixels. Furthermore, often such
2289-
devices have limited resources, and do not have the capability to rotate
2290-
the image into an upright orientation. However, this type of device may
2291-
have internal knowledge or can accept input from its user as to the
2292-
rotational correction to perform. The &lsquo;<a
2286+
<p>If a picture is taken with a camera turned on its side, or a document
2287+
isn't positioned correctly within a scanner, the resultant image may be
2288+
"sideways" or even upside-down. The &lsquo;<a
22932289
href="#image-orientation0"><code
22942290
class=property>image-orientation</code></a>&rsquo; property provides a way
2295-
to apply an &rdquo;out-of-band&ldquo; rotation to image source data to
2296-
correctly orient an image.
2291+
to apply an "out-of-band" rotation to image soruce data to correctly
2292+
orient an image.
2293+
2294+
<p class=note>Note that some devices will "tag" an image with some metadata
2295+
indicating its correct orientation, so image viewing software can do the
2296+
necessary transformation themselves. Due to legacy compatibility
2297+
restraints, browsers are required to ignore this data by default. A future
2298+
level of this specification is expected to have a value that applies the
2299+
metadata-specified transformation automatically.
22972300

22982301
<p class=note>Note this facility is not intended to specify layout
22992302
transformations such as arbitrary rotation or flipping the image in the
@@ -2370,10 +2373,6 @@ <h3 id=image-orientation><span class=secno>6.2. </span> Orienting an Image
23702373
&lsquo;<code class=css>image()</code>&rsquo; function with an opposite
23712374
directionality to its context, or using CSS Transforms.
23722375

2373-
<p class=note>Note that in CSS, orientation data encoded in the image (e.g.
2374-
EXIF data) is ignored. <span class=issue>Is this an issue? What do
2375-
printers do?</span>
2376-
23772376
<div class=example>
23782377
<p>The following example rotates the image 90 degrees clockwise:</p>
23792378

css3-images/Overview.src.html

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1489,24 +1489,12 @@ <h3 id="image-resolution">
14891489
<h3 id="image-orientation">
14901490
Orienting an Image on the Page: the 'image-orientation' property</h3>
14911491

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-
&rdquo;out-of-band&ldquo; rotation to image source data to correctly orient
1501-
an image.
1502-
1503-
<p class="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+
<p class='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+
<p class="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]].)
15101498
It should only be used to correct incorrectly-oriented images.</p>
15111499

15121500
<table class="propdef">
@@ -1556,10 +1544,6 @@ <h3 id="image-orientation">
15561544

15571545
<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>
15581546

1559-
<p class="note">Note that in CSS, orientation data encoded in the image
1560-
(e.g. EXIF data) is ignored. <span class="issue">Is this an issue? What
1561-
do printers do?</span>
1562-
15631547
<div class="example">
15641548
<p>The following example rotates the image 90 degrees clockwise:</p>
15651549

0 commit comments

Comments
 (0)