Das Lineal und die Möglichkeit, Hilfslinien zu ziehen, sind unverzichtbare Funktionen in Photoshop und anderen Bildbearbeitung- und Zeichenanwendungen. Auch auf einer Website kann es hilfreich sein, Abstände zu messen sowie Ausrichtungen mittels Hilfslinien zu prüfen. RulersGuides.js fügt per Bookmarklet ein solches Lineal mit entsprechenden Funktionen auf jede Website ein.
Bekannte Funktionen aus Photoshop
Um RulersGuides.js nutzen zu können, muss das JavaScript als Bookmarklet im Browser abgelegt werden. Anschließend fügt es auf jeder beliebigen Website per Aufruf des Bookmarklets ein Lineal ein, wie man es aus Photoshop kennt. Die Einheit des Lineals ist logischerweise in Pixel angegeben.
X- und Y-Koordinaten sowie Breite und Höhe der gezogenen Rechtecke
Aus dem Lineal lassen sich horizontale und vertikale Hilfslinien ziehen und auf der Website platzieren. Über ein Menü stehen einem verschiedene Funktionen zur Verfügung. Wer Hilfslinien zum Beispiel einsetzt, um damit Abstände, Größen und Positionen zu messen, wird die Funktion „Show detailed info“ ganz hilfreich finden. Sie zeigt zu jedem Rechteck, das per Hilfslinien gezogen wurde, die X- und Y-Koordinaten sowie die Breite und Höhe an.
Verschiedene Darstellungsmöglichkeiten
Die Lineale sind in der Normaleinstellung an den linken und oberen Rand des HTML-Dokumentes gebunden. Das heißt, beim Scrollen nach unten verschwindet das horizontale Lineal. Per „Unlock rulers“ können die Lineale so dargestellt werden, dass sie immer sichtbar bleiben.
Außerdem ist es möglich, die Lineale und die Hilfslinien unabhängig voneinander ein- und auszublenden. Natürlich ist es auch möglich, alle Hilfslinien auf einmal zu löschen.
Hilfslinien an DOM-Elemente ausrichten
Für eine präzise Platzierung von Hilfslinien gibt es die Funktion „Snap to DOM“. Hierbei werden die Hilfslinien immer an den Außenkanten der DOM-Elemente ausgerichtet. So können Hilfslinien beispielsweise exakt so platziert werden, dass sie ein bestimmtes Element – zum Beispiel einen „<p>“-Absatz oder ein „<section>“-Bereich – umschließen.
Alternativ gibt es die Möglichkeit, Hilfslinien in festen Abständen zu platzieren – zum Beispiel alle 100 Pixel von oben und alle 50 Pixel von links. So kann man sich schnell ein Raster bauen.
Hilfslinien speichern
Sobald eine Seite neu geladen wird, verschwinden die Hilfslinien wieder. Es gibt aber die Möglichkeit, alle gesetzten Hilfslinien zu speichern. Sie lassen sich dann aus einem Menü heraus wieder abrufen und darstellen.
Die Hilfslinien werden immer pro Domain gespeichert. Man kann gespeicherte Hilfslinien also nicht für verschiedene Websites nutzen, sondern immer nur innerhalb eines Projektes.
Bookmarklet für alle Browser
Das Bookmarklet RulersGuides.js gibt es in zwei Ausführungen. Eine ist für den Internet Explorer ab Verison 7 (allerdings ohne Möglichkeit, Hilfslinien zu speichern), die andere Variante für alle anderen gängigen Browser.
Link zum Beitrag
RulersGuides.js steht unter der bekannten MIT-Lizenz, die den kostenfreien Einsatz zu privaten und kommerziellen Zwecken erlaubt. Eine kurze Anleitung zur Bedienung, in der auch die Tastenkombinationen zum Aufruf der Funktionen vorgestellt werden, ist ebenfalls verfügbar.
