Page Ruler voegt hulplijnen en sleebare hulplijnen toe aan webpagina's in Photoshop-stijl. Pixelnauwkeurige linealen lopen langs de bovenkant en linkerkanten van de viewport, en u kunt hulplijnen op de pagina slepen om afstanden te meten, uitlijning te controleren en afstand te verifiëren — allemaal rechtstreeks op de live pagina.
Ontwerpers die in Figma of Photoshop werken, vertrouwen op linealen en hulplijnen om afstand en uitlijning te controleren. Maar wanneer deze ontwerpen in HTML/CSS worden geïmplementeerd, betekent het verifiëren van pixelnauwkeurigheid meestal dat u DevTools opent, de ene na de andere elementen aanwijst en berekende waarden vergelijkt met de mockup. Page Ruler brengt de vertrouwde workflow van linealen en hulplijnen rechtstreeks naar de browser. Een horizontale liniaal met maatstreepjes loopt over de bovenkant van de viewport, en een verticale liniaal loopt langs de linkerkant — beide geven pixelposities aan. Klik en sleep vanaf beide linealen om een hulplijn op de pagina te trekken. Hulplijnen zijn kleurgecodeerd (blauw voor horizontaal, rood voor verticaal) en geven hun pixelpositie aan. De afstand tussen alle twee parallelle hulplijnen wordt automatisch berekend en weergegeven. Sleep hulplijnen om ze opnieuw in te stellen of dubbelklik om ze te verwijderen. De hele overlay is niet-storend — deze liegt bovenop de pagina zonder de indeling of interacties te beïnvloeden.
Nauwkeurige linealen met maatstreepjes bij elke 50 pixels lopen langs de boven- en linkerkanten van de viewport. De linealen schuiven met de pagina mee en geven nauwkeurige pixelposities aan ten opzichte van de pagina-oorsprong (0,0). Maatstreepjes met 10px-intervallen met labels bij elke 50px.
Klik en sleep vanuit de horizontale liniaal om een horizontale hulplijn te maken, of vanuit de verticale liniaal voor een verticale hulplijn. Hulplijnen snap aan de cursorpositie en geven hun exacte pixelcoördinaat weer (bijv. y: 200px). Sleep om opnieuw in te stellen, dubbelklik om te verwijderen.
Wanneer twee parallelle hulplijnen zijn geplaatst, wordt de pixelafstand daartussen automatisch berekend en weergegeven met een verbindende beugel en label. Plaats twee horizontale hulplijnen 120px uit elkaar en zie "120px" ertussenin gelabeld.
Horizontale hulplijnen zijn blauw, verticale hulplijnen zijn rood — wat het gemakkelijk maakt om ze in één oogopslag te onderscheiden wanneer meerdere hulplijnen zijn geplaatst. Elke hulplijn toont zijn positie in een klein labelbadge.
Linealen en hulplijnen worden weergegeven als een transparante overlay die de DOM van de pagina, indeling of JavaScript niet beïnvloedt. U kunt nog steeds door klikken om te communiceren met pagina-elementen. De overlay legt alleen klikken vast op de linealen en hulplijngrepen.
Plaats zoveel hulplijnen als u nodig hebt — er is geen limiet. Maak een volledig metriek rooster met horizontale en verticale hulplijnen die elk belangrijk uitlijningspunt op de pagina markeren.
De mockup zegt dat de header 80px hoog is en de inhoud begint op 120px van de bovenkant. Plaats horizontale hulplijnen op die posities en verifieer onmiddellijk of de geïmplementeerde pagina overeenkomt met de ontwerpspecificaties.
Plaats hulplijnen bovenaan en onderaan herhaalde elementen (kaarten, lijstitems, secties) om te verifiëren dat zij allemaal dezelfde afstand hebben. Inconsistente gaten tussen items worden onmiddellijk duidelijk.
Plaats een verticale hulplijn langs de linkerkant van een kop en controleer of de alineatekst, knoppen en afbeeldingen eronder op dezelfde lijn zijn uitgelijnd. Verkeerde uitlijningen van slechts enkele pixels zijn zichtbaar tegen de hulplijn.
Plaats twee verticale hulplijnen op de linker- en rechterkanten van een element om de breedte ervan te meten. Plaats twee horizontale hulplijnen voor hoogte. De automatisch berekende afstand geeft u de exacte pixelafmetingen.
Plaats een verticale hulplijn op veel voorkomende breekpuntbreedtes (768px, 1024px, 1280px) en wijzig het formaat van de browser om te controleren of elementen op elk breekpunt correct worden herschikt. De hulplijnen blijven als visuele referentiepunten vast staan.
Open het floating dock van DevSuite Pro en klik op het Paginalinaal-pictogram. Pixelnauwkeurige linealen verschijnen langs de boven- en linkerkanten van de viewport.
Klik en sleep vanuit de bovenlinaal om een horizontale hulplijn te plaatsen, of vanuit de linkerlinaal voor een verticale hulplijn. De hulplijn volgt uw cursor en snapt naar de pixelpositie waar u het loslaat.
Elke hulplijn geeft zijn pixelpositie aan (bijv. y: 200px). Wanneer twee parallelle hulplijnen zijn geplaatst, wordt de afstand daartussen automatisch weergegeven met een gelabelde beugel.
Sleep elke hulplijn om deze naar een nieuwe positie te verplaatsen — de afstandslabels worden in realtime bijgewerkt. Dubbelklik op een hulplijn om deze van de pagina te verwijderen.
Klik opnieuw op het Paginalinaal-pictogram om alle linealen en hulplijnen te verbergen. Uw hulplijnposities blijven behouden als u deze opnieuw activeren tijdens dezelfde sessie.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
