/pageliner

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

 PageLiner Join the chat at https://gitter.im/WebChimp-DE/pageliner

Chrome extension version Chrome extension user count Chrome extension price Chrome extension rating count

If you like this extension, I'd be really happy to receive an honest review and/or a tiny donation 🤗🥰 That means a lot to me!

  • PayPal
  • Bitcoin (BTC): 1PD2v5chdNR67kjpWAyKYZ5U6oSFqpRiVs
  • Dogecoin (DOGE): D5oEU9VbQ8jY8BGcrVoMLUxXzD26VMJzqM
  • Ethereum (ETH): 0xEE3057Cc44F93DC20423a682AFB35e93C4A134fd
  • Litecoin (LTC): LXbNG6VdCyqWmgvKZxyr4QinfiFiq8ebyb
  • Ripple (XRP): rnVEhBpThdY9Vs8sYJdoXxH9oFRC84LDyw
  • Stellar Lumen (XLM): GCLNBSZWFQZLALMMNKTCUMXHI5QMEGN5XE2SH6HG63HKXTGUINFYI7OI

Google Chrome and Edge extension to create guidelines on a website.

â–¶ View in Chrome Web Store

▶ View in Mozilla 🦊 Firefox Add-Ons Store

â–¶ View in Microsoft Edge-Add-Ons 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 guidelines from the rulers

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

Add guidelines with shortcuts

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

Move guidelines with keyboard

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

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

Remove guidelines with keyboard

  1. Select a guideline.
  2. Press Del.

Discard active guideline selection

  1. Select a guideline.
  2. Press Esc.

Measure the distance between guidelines / window border

  1. Hover over a guideline.
  2. Hold down Ctrl.

Show and hide guidelines and rulers with shortcuts

  • Alt+G toggles the visibility of the guidelines.
  • 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.7 (2023-04-20)
    • Removed advertisement block
    • Added Bulgarian translations. Thanks to @KaiserDMC
    • Added Serbian translations. Thanks to @ajakov
    • Added Polish translations. Thanks to @IrisKolobom
    • Added Hungarian translations. Thanks to @poky1084
    • Added Japanese translations. Thanks to @MizuhoOkimoto
    • Added Italian translations. Thanks to @github4maninder
    • Added Swedish translations.
    • Added Arabic translations. Thanks to @omarelweshy
    • Added Czech translations. Thanks to @Fluik
  • v1.6.6 (2021-12-14)
    • A bit of cleanup in the code style
    • Added advertisement
      • A few notes on that: I know that ads can be annoying, however I'm giving this tool out for free. Years of development and maintenance are what helps you in your daily business, which increases your productivity and effectiveness in your job. Even though, you can disable the ad for no cost: If it doesn't bother you too much, I'd highly appreciate, if you just don't disable the advertisement. It doesn't hurt you and gives something back to me. For me that sounds like a fair deal. Thanks!
  • v1.6.5 (2021-12-12)
    • Added Slovak translations. Thanks to @github4maninder
    • Added Thai translations. Thanks to @DerekJxy
    • Fixed donation link
    • Removed js/bootstrap.min.js, because it's not needed anymore
  • v1.6.4 (2020-12-07)
    • Nothing changed to v1.6.3 (see below), I just had to create a new version number, due to conflicts with submissions in the new stores.
  • v1.6.3 (2020-12-07)
  • v1.6.2 (2020-05-25)
    • Removed unnecessary rights from manifest.json
  • 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 guidelines with shortcuts while pressing Ctrl or Shift
  • v1.5.1 (2018-04-27)
    • Add functionality to delete selected guideline by pressing Esc.
    • Add functionality to discard selected guideline by pressing Del.
    • Add functionality to delete guideline when moving it to the left/top window border. Thanks to @wolv-dev for your suggestion!
    • guidelines 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
    • guidelines 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 guideline with the arrow keys after clicking it. Thanks to @Tainan404 for your suggestion!
    • Added shortcuts Alt+H and Alt+V to add guidelines. Have a look at the features on this page. Thanks to @Tainan404 for your suggestion!
  • v1.3.4 (2017-12-18)
  • v1.3.3 (2017-10-12)
    • Fixed bug that caused guidelines 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 guidelines (Hover over guideline 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 guidelines
  • v1.2.1 (2016-10-13)
    • Fixed encoding error.
  • v1.2.0 (2016-10-13)
    • Removed Ad-Link
    • Added possibility to create new guidelines by dragging from the rulers. Have a look at the features on this page.
    • Added indicator whether guidelines are shown
  • v1.1.2 (2014-08-30)
    • Horizontal guidelines are now placed in viewport when you have scrolled down.
    • The ID of every guideline 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 guidelines is now shown in the plugin icon.
    • UI optimization
    • The color of guidelines can now be changed.
    • Every single guideline 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 guidelines.
  • v1.0.1 (2014-06-30)
    • Description added
  • v1.0.0 (2014-06-26)
    • Rulers are now hidden when deleting all guidelines.
    • Code-Cleanup