emilpalsson / pageliner

:triangular_ruler: Google Chrome extension to create guide lines on a website.

 PageLiner

If you like this extension, I would be glad if you buy me a beer 🍺 😁

Google Chrome extension to create guide lines on a website.

View in Chrome Web Store

If you have any suggestions or bugs, please create an issue or use the support form in Chrome Web Store. Thank you!

Features

Add guide lines from the rulers

Hover over one of the rulers and start dragging a new guide line from there, like you know it from Photoshop.

Add guide lines with shortcuts

• Alt+H adds a horizontal guide line at your cursor position and selects it for keyboard movement.
• Alt+V adds a vertical guide line at your cursor position and selects it for keyboard movement.
• Alt+A adds a horizontal and a vertical guide line at your cursor position.

Move guide lines with keyboard

1. Add a guide line.
2. Click on it (the guide line will slightly blur then).
3. Use your arrow keys to move the guide line.

🔥 PRO TIP: Hold down Shift while using the arrow keys to move the guide line faster. 😉

Remove guide lines with keyboard

1. Select a guide line.
2. Press Del.

Discard active guide line selection

1. Select a guide line.
2. Press Esc.

Measure the distance between guide lines / window border

1. Hover over a guide line.
2. Hold down Ctrl.

Show and hide guidelines and rulers with shortcuts

• Alt+G toggles the visibility of the guidlines.
• Alt+R toggles the visibility of the rulers.

Contributing

If you'd like to contribute to this repository, here is a guide on how to set up an unpacked extension in Google Chrome. Please make sure to include your changes in the Changelog below and consider changing the version in the manifest.json.

Changelog

• v1.6.1 (2019-10-10)
  • Hidden rulers/guides now stay hidden after reload
• v1.6.0 (2019-10-10)
  • Add horizontal and vertical guidelines with Alt+A
  • Toggle visibility of guidelines with Alt+G
  • Toggle visibility of rulers with Alt+R
• v1.5.3 (2019-10-08)
  • Toggle guides individually from menu
• v1.5.2 (2018-06-08)
  • Prevented adding new guide lines with shortcuts while pressing Ctrl or Shift
• v1.5.1 (2018-04-27)
  • Add functionality to delete selected guide line by pressing Esc.
  • Add functionality to discard selected guide line by pressing Del.
  • Add functionality to delete guide line when moving it to the left/top window border. Thanks to @wolv-dev for your suggestion!
  • Guide lines that are added via keyboard shortcuts are now positioned at the mouse cursor position. Thanks to @YannikSc for your suggestion!
• v1.5.0 (2018-04-22)
  • Cleaned up code
  • Guide lines that are added with shortcut are now directly selected for keyboard movement
  • Fixed vertical movement with the keyboard which cause viewport scrolling
  • Add faster movement with keyboard when pressing Shift + arrow keys
  • Add install page after extension update
• v1.4.0 (2018-04-21)
  • Added function to move a guide line with the arrow keys after clicking it. Thanks to @Tainan404 for your suggestion!
  • Added shortcuts Alt+H and Alt+V to add guide lines. Have a look at the features on this page. Thanks to @Tainan404 for your suggestion!
• v1.3.4 (2017-12-18)
  • Added touch support with "jQuery UI Touch Punch" by @furf
  • Added Portuguese translations. Thanks to @Tainan404
• v1.3.3 (2017-10-12)
  • Fixed bug that caused guide lines to jump when the user isn't at the top of the page. Thanks to @boxmein for reporting this issue.
  • Updated jQuery and jQuery UI
  • Cleaned up repository
  • Reformatted code
• v1.3.2 (2017-05-09)
  • Added Spanish translations.
  • Added French translations.
  • Removed unused jQuery click event from page action
• v1.3.1 (2017-05-02)
  • Added Russian translations. Thanks to @vanilla-thunder
  • Added Dutch translations. Thanks to @hoekiesda
  • Adjusted color of distance lines
• v1.3.0 (2017-04-27)
  • Added functionality to see distances between guide lines (Hover over guide line and press the Ctrl key). Have a look at the features on this page.
• v1.2.3 (2016-11-07)
  • Added a small donate button for people that would like to support this awesome extension.
• v1.2.2 (2016-10-13)
  • Fixed bug with double rendered guide lines
• v1.2.1 (2016-10-13)
  • Fixed encoding error.
• v1.2.0 (2016-10-13)
  • Removed Ad-Link
  • Added possibility to create new guide lines by dragging from the rulers. Have a look at the features on this page.
  • Added indicator whether guide lines are shown
• v1.1.2 (2014-08-30)
  • Horizontal guide lines are now placed in viewport when you have scrolled down.
  • The ID of every guide line is now shown in it's tooltip which is referenced to the ID in the extension popup.
  • Changed default locale to "en"
• v1.1.1 (2014-07-14)
  • Implemented jQuery Color Picker because the behaviour of HTML 5 color-input isn't that reliable on all operating systems.
• v1.1.0 (2014-07-13)
  • When zooming in a document the positions in tooltips are float numbers.
  • The number of guide lines is now shown in the plugin icon.
  • UI optimization
  • The color of guide lines can now be changed.
  • Every single guide line can be removed manually.
• v1.0.3 (2014-07-10)
  • Updated translations (en)
  • Cleanup
• v1.0.2 (2014-07-01)
  • Rulers are now instantly hidden when deleting all guide lines.
• v1.0.1 (2014-06-30)
  • Description added
• v1.0.0 (2014-06-26)
  • Rulers are now hidden when deleting all guide lines.
  • Code-Cleanup