Kategorien
Design JavaScript & jQuery Webdesign

RulersGuides.js: Hilfslinien wie in Photoshop

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.

rulersguidejs-teaser_DE

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.

rulersguides2
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.

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.