Nagdadagdag ang Page Ruler ng Photoshop-style na rulers at draggable guide lines sa anumang webpage. Pixel-accurate na rulers ang sumasaklaw sa itaas at kaliwang gilid ng viewport, at maaari kang mag-drag ng guide lines sa page para sukatin ang mga distansya, suriin ang alignment, at ma-verify ang spacing — lahat nang direkta sa live na page.
Ang mga designer na nagtatrabaho sa Figma o Photoshop ay umaasa sa mga ruler at guide para suriin ang spacing at alignment. Ngunit kapag nai-implement na ang mga design na iyon sa HTML/CSS, ang pag-verify ng pixel accuracy ay karaniwang nangangailangan ng pagbukas ng DevTools, pag-hover sa mga element isa-isa, at pagkukumpara ng computed values sa mockup. Dinadala ng Page Ruler ang pamilyar na ruler-at-guide workflow nang direkta sa browser. Ang horizontal ruler na may tick marks ay sumasaklaw sa itaas ng viewport, at ang vertical ruler ay sumasaklaw sa kaliwang gilid — pareho itong nagpapakita ng pixel positions. Mag-click at mag-drag mula sa alinmang ruler para makabukas ng guide line sa page. Ang mga guide ay may color-coded (blue para sa horizontal, red para sa vertical) at ipinapakita ang kanilang pixel position. Awtomatikong kinakalkula at ipinapakita ang distansya sa pagitan ng dalawang parallel na guide. I-drag ang mga guide para iposisyon muli, o double-click para alisin. Ang buong overlay ay hindi mapanghimasok — nakaupo ito sa ibabaw ng page nang hindi naaapektuhan ang layout o interactions.
Tumpak na rulers na may tick marks sa bawat 50 pixels ang sumasaklaw sa itaas at kaliwang gilid ng viewport. Nag-i-scroll ang mga ruler kasabay ng page at nagpapakita ng tumpak na pixel positions na may kaugnayan sa page origin (0,0). Tick marks sa 10px intervals na may mga label sa bawat 50px.
Mag-click at mag-drag mula sa horizontal ruler para gumawa ng horizontal guide, o mula sa vertical ruler para sa vertical guide. Nag-a-snap ang mga guide sa cursor position at ipinapakita ang eksaktong pixel coordinate (hal., y: 200px). Mag-drag para iposisyon muli, double-click para alisin.
Kapag may dalawang parallel na guide na nakalagay, awtomatikong kinakalkula at ipinapakita ang pixel distance sa pagitan nila na may connecting bracket at label. Maglagay ng dalawang horizontal guides na 120px ang pagitan at makita ang "120px" na naka-label sa pagitan nila.
Ang mga horizontal guide ay blue, ang mga vertical guide ay red — madaling makilala ang mga ito sa isang tingin kapag maraming guide ang nakalagay. Ipinapakita ng bawat guide ang posisyon nito sa maliit na label badge.
Ang mga ruler at guide ay nirenderan bilang transparent overlay na hindi naaapektuhan ang DOM, layout, o JavaScript ng page. Maaari ka pa ring mag-click para makipag-interact sa mga elemento ng page. Ang overlay ay kumukuha lamang ng mga click sa mga ruler at guide handles.
Maglagay ng gasinong daming guide na kailangan mo — walang limitasyon. Gumawa ng kumpletong measurement grid na may horizontal at vertical guides na nagmamarka sa bawat mahalagang alignment point sa page.
Sinasabi ng mockup na ang header ay 80px ang taas at ang content ay nagsisimula sa 120px mula sa itaas. Maglagay ng horizontal guides sa mga posisyon na iyon at agad na ma-verify kung ang na-implement na page ay tumutugma sa mga design specifications.
Maglagay ng guides sa itaas at ibaba ng mga paulit-ulit na elemento (cards, list items, sections) para ma-verify na pare-pareho ang spacing ng lahat. Agad na magiging halata ang mga hindi pantay na agwat sa pagitan ng mga item.
Maglagay ng vertical guide sa kaliwang gilid ng heading, pagkatapos suriin kung ang paragraph text, buttons, at images sa ibaba ay naka-align sa parehong linya. Ang mga misalignment na kahit iilang pixels lang ay makikita laban sa guide.
Maglagay ng dalawang vertical guides sa kaliwang at kanang gilid ng elemento para sukatin ang lapad nito. Maglagay ng dalawang horizontal guides para sa taas. Ang auto-calculated na distansya ay nagbibigay sa iyo ng eksaktong pixel dimensions.
Maglagay ng vertical guide sa karaniwang breakpoint widths (768px, 1024px, 1280px) at i-resize ang browser para suriin kung tama ang pag-reflow ng mga elemento sa bawat breakpoint. Nananatiling nakatayo ang mga guide bilang visual reference points.
Buksan ang DevSuite Pro floating dock at i-click ang Page Ruler icon. Lumalabas ang pixel-accurate na rulers sa itaas at kaliwang gilid ng viewport.
Mag-click at mag-drag mula sa itaas na ruler para maglagay ng horizontal guide line, o mula sa kaliwang ruler para sa vertical guide. Sinusundan ng guide ang iyong cursor at nag-a-snap sa pixel position kung saan mo ito bibitawan.
Ipinapakita ng bawat guide ang pixel position nito (hal., y: 200px). Kapag may dalawang parallel na guide na nakalagay, awtomatikong ipinapakita ang distansya sa pagitan nila na may labeled bracket.
Mag-drag ng anumang guide para ilipat ito sa bagong posisyon — nag-a-update ang mga distance label sa real-time. Double-click ang isang guide para alisin ito sa page.
I-click muli ang Page Ruler icon para itago ang lahat ng ruler at guide. Nananatili ang iyong mga guide positions kung muling ia-activate mo ito sa parehong session.
I-install ang DevSuite Pro nang libre at i-unlock ang 39+ developer tools para sa iyong browser.
