add ruler marks and/or guides

[radiovisual]

In your demonstration video, you use two different rulers to check the margins of a webpage element.

If Linear's rulers had ruler marks (the little lines that are usually on rulers):

and/or Linear's rulers had draggable guides (much like the guides you can drag out from rulers in Photoshop), then you could easily check the margins of an element with only one ruler.

For example, in the image below, I have shown draggable guides (in red) that show the guide's position (in px, relative to the edge of the ruler that the guide was dragged from), which can easily tell me that the web page element I am measuring is 10 pixels away from each of the ruler's edges:

Each guide would have a key piece of data attached to it: The distance (in px or em) from the ruler edge it was dragged from.

Adding draggable guides could turn this into a powerful tool for analyzing/troubleshooting the layout of webpages, and element the need to duplicate the rulers for checking balance.

Imagine a scenario where you want to check all the margins of an element (top, bottom, left and right). You can either try to manage 4 rulers on the page (being careful not to accidentally change the width or height of any of them), or manage one ruler instance with 4 guides. One ruler with 4 guides would be a lot easier!

[mikaa123]

That's genius! Do think it would conflict with #10? For instance, grabbing the guides to the center would overlap the "centering" guide. We should make sure the two features don't overlap too much... Maybe #10 is a special case of this one.

[radiovisual]

That is what I was thinking, that the draggable guides can change in color when the draggable guide has found the "exact center" (just like it does when you are using the guides feature in XCode for iOS development), so if the draggable guide is overlapping the "center guide", you will still get the benefits of both features, working harmoniously together.

[mikaa123]

👍 I think that would be a good way to harmonize the two features

[radiovisual]

The update to v1+ has got me thinking more about this feature. Once click-through transparent windows feature is implemented (and you can click-through the transparent window), linear could become a "fullscreen" app. If we made linear a fullscreen app, then it could be fully cross-platform, because the problems for the chromeless/transparent windows on other OS's comes from resizing the windows...so if the ruler "gutter" hugs the perimeter of the screen, and the rulers are dragged out from within this "fullscreen" window, then linear never has to resize it's transparent window, and you would get a cool "guide" feature as an added bonus.

The usability would be the exact same as it is in photoshop:

Notice how the ruler "gutter" is on the top and left edge of the screen. From there, photoshop has you click and drag your guide to the screen.

So we can add ruler guides, but also embed the "ruler" windows (not actual browser windows), into the fullscreen window and we get the best of all worlds: draggable ruler "windows" (again, not actual browser windows), ruler guides, and cross-platform behaviors.

[mikaa123]

Yes! That'd make the UX as smooth as it could be :) Let's hope it ships fast. In the meantime, we could spike that on a linux/windows machine

[radiovisual]

If we don't need click-through support, we could ship this feature now. If users toggle the ruler view on and off (like you do in Photoshop with CMD + R), then we don't have to wait for click-through support, and linear could become cross-platform right away.

I don't see the hotkey toggle being a big deal, so there would be more pros then cons. Then when click-through supports ships, we can add that in.

[mikaa123]

That'd be radical, but a good way to check the usability. Sounds like a good plan to me!