diff --git a/ui/layout.css b/ui/layout.css
index 9b7588e1..70d72ed0 100644
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -267,7 +267,7 @@ body {
   left: 5px;
   right: auto;
 }
-/* XXX make the marks position relative to viewer or gidden compleatly */
+/* NOTE: we use a different mark representation for single image mode... */
 .marks-visible.single-image-mode.viewer .marked.image:after {
   display: none;
 }
@@ -403,6 +403,158 @@ body {
   -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
   transform: rotate(90deg) scaleY(1) scaleX(1);
 }
+/* compensate for flipping... */
+.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
+  -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  transform: rotate(0deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  transform: rotate(90deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: 0px;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  transform: rotate(180deg) scaleY(1) scaleX(-1);
+}
+.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: 0px;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  transform: rotate(270deg) scaleY(1) scaleX(-1);
+}
+.image[flipped*="vertical"] .inline-image-info {
+  top: 0px;
+  bottom: auto;
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  transform: rotate(0deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="90"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: 100%;
+  right: auto;
+  -webkit-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  transform-origin: bottom left;
+  -webkit-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  transform: rotate(-270deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="180"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  transform: rotate(180deg) scaleY(-1) scaleX(1);
+}
+.image[orientation="270"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  transform: rotate(270deg) scaleY(-1) scaleX(1);
+}
+.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: 0px;
+  bottom: auto;
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  transform: rotate(0deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: auto;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  transform: rotate(180deg) scaleY(-1) scaleX(-1);
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: auto;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(90deg) scaleY(-1) scaleX(-1);
+}
 .overlay-info {
   display: none;
   position: absolute;
diff --git a/ui/layout.less b/ui/layout.less
index 33adfce6..4e0735ec 100755
--- a/ui/layout.less
+++ b/ui/layout.less
@@ -222,6 +222,7 @@ body {
 
 
 /***************************************************** Image marks ***/
+
 .marks-visible.viewer .marked.image:after {
 	display: block;
 	position: absolute;
@@ -271,8 +272,7 @@ body {
 	right: auto;
 }
 
-
-/* XXX make the marks position relative to viewer or gidden compleatly */
+/* NOTE: we use a different mark representation for single image mode... */
 .marks-visible.single-image-mode.viewer .marked.image:after {
 	display: none;
 }
@@ -383,7 +383,6 @@ body {
 	left: 100%;
 
 	.origin(bottom, left);
-
 	.rotate(-90deg);
 }
 .image[orientation="180"] .inline-image-info {
@@ -398,10 +397,113 @@ body {
 	right: 100%;
 
 	.origin(bottom, right);
-
 	.rotate(90deg);
 }
 
+/* compensate for flipping... */
+.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
+	.flipped-horizontally;
+}
+.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: -100%;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(90deg, -1, 1);
+}
+.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: 0px;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(180deg, -1, 1);
+
+}
+.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: 0px;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(270deg, -1, 1);
+}
+
+
+.image[flipped*="vertical"] .inline-image-info {
+	top: 0px;
+	bottom: auto;
+	.flipped-vertically;
+}
+.image[orientation="90"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: 100%;
+	right: auto;
+
+	.origin(bottom, left);
+	.transform(-270deg, 1, -1);
+}
+.image[orientation="180"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: -100%;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(180deg, 1, -1);
+}
+.image[orientation="270"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: -100%;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(270deg, 1, -1);
+}
+
+
+.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: 0px;
+	bottom: auto;
+	.transform(0deg, -1, -1);
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: -100%;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(-90deg, -1, -1);
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: auto;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(180deg, -1, -1);
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: auto;
+	right: auto;
+
+	.origin(bottom, right);
+	.transform(90deg, -1, -1);
+}
+
+
+
+
 .overlay-info {
 	display: none;
 	position: absolute;