helephant · January 23, 2019 17:30 · Jan 23, 2019 · Jan 23, 2019 · Jan 23, 2019
diff --git a/css rotation on exif images.md b/css rotation on exif images.md
@@ -2,4 +2,6 @@ Exif rotation in browsers is a journey of disappointment. The [definitive guide
 
 Firefox supports a [CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) that tells the browser to respect exif rotation, but [no other browser respects it](https://caniuse.com/#feat=css-image-orientation). There's been a [Chrome ticket](https://bugs.chromium.org/p/chromium/issues/detail?id=158753) open to fix it for about five years now. 
 
-This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would probably cause more problems than it solved. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead. 
+This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would probably cause more problems than it solved. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead. 
+
+The trick to getting it to work is to put your images in another container with a width and height set on it. This reserves the space the image will need in the document's flow when it is in it's correct rotation. 
diff --git a/css rotation on exif images.md b/css rotation on exif images.md
@@ -2,4 +2,4 @@ Exif rotation in browsers is a journey of disappointment. The [definitive guide
 
 Firefox supports a [CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) that tells the browser to respect exif rotation, but [no other browser respects it](https://caniuse.com/#feat=css-image-orientation). There's been a [Chrome ticket](https://bugs.chromium.org/p/chromium/issues/detail?id=158753) open to fix it for about five years now. 
 
-This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would be quite a hacky solution. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead. 
+This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would probably cause more problems than it solved. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead. 
diff --git a/css rotation on exif images.md b/css rotation on exif images.md
@@ -0,0 +1,5 @@
+Exif rotation in browsers is a journey of disappointment. The [definitive guide on the history](http://keyj.emphy.de/exif-orientation-rant/) of it is quite an interesting read. There's also a [current state of the world](https://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/) round-up written in 2012, which is pretty much still the same in 2019. 
+
+Firefox supports a [CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation) that tells the browser to respect exif rotation, but [no other browser respects it](https://caniuse.com/#feat=css-image-orientation). There's been a [Chrome ticket](https://bugs.chromium.org/p/chromium/issues/detail?id=158753) open to fix it for about five years now. 
+
+This is a little proof of concept to try to fix the issue with CSS transforms. We didn't end up using it because we had the images in other elements that were already rotated themselves, so we felt like this would be quite a hacky solution. But who knows, maybe it will be useful some time! We decided it would be better to just process the images on the server instead. 
diff --git a/rotation.html b/rotation.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head >
+  <meta charset="utf-8">
+  <style type="text/css">
+  	img {
+  		-webkit-image-orientation: from-image;
+  		border: 3px red solid;
+  	}
+
+  	.rotate-90 {
+  		transform: translateY(-100%) rotateZ(90deg);
+  		transform-origin: left bottom;
+  	}
+  	.rotate-180 {
+  		transform: rotate(180deg);
+  	}
+  	.rotate-270 {
+  		transform: rotate(-90deg) translatex(-100%);
+		transform-origin: top left;
+  	}
+
+  	.landscape-container {
+  		width: 600px;
+  		height: 450px;
+  		display: inline-block;
+  		border: 3px blue solid;
+  		background: grey;
+  	}
+
+  	.portrait-container {
+  		width: 450px;
+  		height: 600px;
+  		display: inline-block;
+  		border: 3px blue solid;
+  		background: grey;
+  	}
+  </style>
+
+ </head>
+ <body>
+ 	<h2>Landscape</h2>
+ 	<picture class="landscape-container">
+ 		<img src="landscape_1.jpg">
+ 	</picture>
+ 	<picture class="landscape-container">
+ 		<img src="landscape_3.jpg" class="rotate-180">
+ 	</picture>
+ 	<picture class="landscape-container">
+ 		<img src="landscape_6.jpg" class="rotate-90">
+ 	</picture>
+ 	<picture class="landscape-container">
+ 		<img src="landscape_8.jpg" class="rotate-270">
+ 	</picture>
+
+ 	<h2>Portrait</h2>
+ 	<picture class="portrait-container">
+ 		<img src="portrait_1.jpg">
+ 	</picture>
+ 	<picture class="portrait-container">
+ 		<img src="portrait_3.jpg" class="rotate-180">
+ 	</picture>
+ 	<picture class="portrait-container">
+ 		<img src="portrait_6.jpg" class="rotate-90">
+ 	</picture>
+ 	<picture class="portrait-container">
+ 		<img src="portrait_8.jpg" class="rotate-270">
+ 	</picture>
+
+ </body>
+ </html>