diff --git a/source/qml/lib/Demo.qml b/source/qml/lib/Demo.qml
--- a/source/qml/lib/Demo.qml
+++ b/source/qml/lib/Demo.qml
@@ -102,6 +102,7 @@
 
             a.find("qquickrectangle").eq(2).draw({
                 outline: {aspectratio: true},
+                ruler: {horizontal: true}
             });
 
             a.find("qquickrectangle").eq(3).draw({
diff --git a/source/qml/lib/Outline.qml b/source/qml/lib/Outline.qml
--- a/source/qml/lib/Outline.qml
+++ b/source/qml/lib/Outline.qml
@@ -19,6 +19,7 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.2
+import org.kde.kirigami 2.4 as Kirigami
 import "tools.js" as T
 
 // Draw a frame around an element
diff --git a/source/qml/lib/Ruler.qml b/source/qml/lib/Ruler.qml
--- a/source/qml/lib/Ruler.qml
+++ b/source/qml/lib/Ruler.qml
@@ -26,15 +26,14 @@
 Item {
     id: canvas
     anchors.fill: parent;
-    property int rx;
-    property int ry;
+    property int offset;
     property bool horizontal: true;
     property string stroke: "rgba(41,128,185, 1)"
     property double scale: T.getScale(canvas)
 
     // using Rectangles because they scale smooth
     Row {
-        y: canvas.ry
+        y: canvas.offset
         x: 0
         id: hackRow
         visible: canvas.horizontal
@@ -49,7 +48,7 @@
         }
     }
     Column {
-        x: canvas.rx
+        x: canvas.offset
         y: 0
         id: hackColumn
         visible: !canvas.horizontal
diff --git a/source/qml/lib/annotate.js b/source/qml/lib/annotate.js
--- a/source/qml/lib/annotate.js
+++ b/source/qml/lib/annotate.js
@@ -14,6 +14,14 @@
     return str.toLowerCase();
 }
 
+// Merge 2 objects of options
+function getOpts(opts, choices) {
+    for (var choice in choices) {
+        opts[choice] = choices[choice];
+    }
+    return opts;
+}
+
 // An extended array of QML elements
 function An(node) {
     this.nodes = [];
@@ -165,7 +173,11 @@
             outline.createObject(root, {item: node, label: opt.label, aspectratio: opt.aspectratio});
         break
         case "ruler":
-            ruler.createObject(root, {rx: node.mapToItem(null, 0, 0).x, horizontal: false});
+            var options = getOpts({
+                offset: opt.horizontal ? node.mapToItem(null, 0, 0).y : node.mapToItem(null, 0, 0).x,
+                horizontal: false
+            }, opt);
+            ruler.createObject(root, options);
         break
         case "padding":
             padding.createObject(root, {item: node});