Rigla de Pagină adaugă rigle în stil Photoshop și linii ghid glisabile pe orice pagină web. Rigle precise la nivel de pixel se întind de-a lungul marginilor superioare și stângi ale viewport-ului, iar tu poți trage linii ghid pe pagină pentru a măsura distanțe, a verifica aliniamentul și a confirma spațierea — direct pe pagina live.
Designerii care lucrează în Figma sau Photoshop se bazează pe rigle și ghiduri pentru a verifica spațierea și aliniamentul. Dar când acele design-uri sunt implementate în HTML/CSS, verificarea acurateței la nivel de pixel implică de obicei deschiderea DevTools, trecerea cu cursorul pe fiecare element în parte și compararea valorilor calculate cu macheta. Rigla de Pagină aduce fluxul de lucru familiar cu rigle și ghiduri direct în browser. O riglă orizontală cu marcaje de graduație se întinde de-a lungul vârfului viewport-ului, iar o riglă verticală de-a lungul marginii stângi — ambele afișând pozițiile în pixeli. Fă clic și trage de pe oricare riglă pentru a plasa o linie ghid pe pagină. Ghidurile sunt codificate cromatic (albastru pentru orizontal, roșu pentru vertical) și afișează poziția în pixeli. Distanța dintre oricare două ghiduri paralele este calculată și afișată automat. Trage ghidurile pentru a le repoziționa sau fă dublu-clic pentru a le elimina. Întregul overlay este neintrusiv — se suprapune peste pagină fără a afecta layout-ul sau interacțiunile.
Rigle precise cu marcaje de graduație la fiecare 50 de pixeli se întind de-a lungul marginilor superioare și stângi ale viewport-ului. Riglele se derulează odată cu pagina și afișează poziții exacte în pixeli față de originea paginii (0,0). Marcaje la intervale de 10px cu etichete la fiecare 50px.
Fă clic și trage de pe rigla orizontală pentru a crea un ghid orizontal, sau de pe rigla verticală pentru un ghid vertical. Ghidurile se aliniază la poziția cursorului și afișează coordonata exactă în pixeli (ex.: y: 200px). Trage pentru a repoziționa, dublu-clic pentru a elimina.
Când sunt plasate două ghiduri paralele, distanța în pixeli dintre ele este calculată și afișată automat cu o paranteză de conectare și etichetă. Plasează două ghiduri orizontale la 120px distanță și vezi "120px" afișat între ele.
Ghidurile orizontale sunt albastre, cele verticale sunt roșii — facilitând distingerea lor dintr-o privire când sunt plasate mai multe ghiduri. Fiecare ghid afișează poziția sa într-o mică etichetă.
Riglele și ghidurile sunt redate ca un overlay transparent care nu afectează DOM-ul paginii, layout-ul sau JavaScript. Poți în continuare face clic pentru a interacționa cu elementele paginii. Overlay-ul captează clicuri doar pe rigle și pe mânerele ghidurilor.
Plasează câte ghiduri ai nevoie — nu există nicio limită. Creează o rețea completă de măsurare cu ghiduri orizontale și verticale care marchează fiecare punct de aliniere semnificativ de pe pagină.
Macheta spune că antetul are 80px înălțime și că conținutul începe la 120px de sus. Plasează ghiduri orizontale la acele poziții și verifică imediat dacă pagina implementată corespunde specificațiilor de design.
Plasează ghiduri la partea de sus și de jos a elementelor repetate (carduri, elemente de listă, secțiuni) pentru a verifica că toate au spațiere identică. Golurile inconsistente dintre elemente devin imediat evidente.
Plasează un ghid vertical la marginea stângă a unui titlu, apoi verifică dacă textul paragrafului, butoanele și imaginile de mai jos se aliniază pe aceeași linie. Dezaliniamentele de câțiva pixeli sunt vizibile față de ghid.
Plasează două ghiduri verticale la marginile stângă și dreaptă ale unui element pentru a-i măsura lățimea. Plasează două ghiduri orizontale pentru înălțime. Distanța calculată automat îți oferă dimensiunile exacte în pixeli.
Plasează un ghid vertical la lățimile comune de breakpoint (768px, 1024px, 1280px) și redimensionează browser-ul pentru a verifica dacă elementele se reorganizează corect la fiecare breakpoint. Ghidurile rămân fixe ca puncte de referință vizuale.
Deschide dock-ul flotant DevSuite Pro și apasă pe pictograma Riglă de Pagină. Rigle precise la nivel de pixel apar de-a lungul marginilor superioare și stângi ale viewport-ului.
Fă clic și trage de pe rigla superioară pentru a plasa o linie ghid orizontală, sau de pe rigla stângă pentru un ghid vertical. Ghidul urmează cursorul tău și se aliniază la poziția în pixeli unde îl eliberezi.
Fiecare ghid afișează poziția sa în pixeli (ex.: y: 200px). Când sunt plasate două ghiduri paralele, distanța dintre ele este afișată automat cu o paranteză etichetată.
Trage orice ghid pentru a-l muta într-o nouă poziție — etichetele de distanță se actualizează în timp real. Fă dublu-clic pe un ghid pentru a-l elimina de pe pagină.
Apasă din nou pe pictograma Riglă de Pagină pentru a ascunde toate riglele și ghidurile. Pozițiile ghidurilor tale sunt păstrate dacă reactivezi în aceeași sesiune.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
