Page Ruler добавя линеали в стил Photoshop и подвижни помощни линии (водачи) към всяка уебстраница. Линеалите с пикселна точност преминават по горния и левия край на изгледа (viewport) и можете да влачите помощни линии върху страницата, за да измервате разстояния, да проверявате подравняването и да верифицирате разстоянията — всичко това директно върху активната страница.
Дизайнерите, работещи във Figma или Photoshop, разчитат на линеали и водачи, за да проверят разстоянието и подравняването. Но когато тези дизайни се внедряват в HTML/CSS, проверката на пикселната точност обикновено означава отваряне на DevTools, задържане на курсора върху елементите един по един и сравняване на изчислените стойности с макета. Page Ruler пренася познатия работен процес с линеали и водачи директно вブラузера. Хоризонтален линеал с деления обхваща горната част на изгледа (viewport), а вертикален линеал обхваща левия край — и двата показват позициите в пиксели. Щракнете и плъзнете от всеки от линеалите, за да изтеглите помощна линия върху страницата. Водачите са цветно кодирани (сини за хоризонтални, червени за вертикални) и показват позицията си в пиксели. Разстоянието между всеки две паралелни помощни линии се изчислява автоматично и се показва. Плъзнете водачите, за да ги препозиционирате, или щракнете двукратно, за да ги премахнете. Целият слой е ненатрапчив — той стои върху страницата, без да засяга оформлението или взаимодействията.
Прецизни линеали с деления на всеки 50 пиксела минават по горния и левия край на изгледа (viewport). Линеалите се превъртат със страницата и показват точни позиции на пикселите спрямо началото на страницата (0,0). Деления на интервали от 10px с етикети на всеки 50px.
Щракнете и плъзнете от хоризонталния линеал, за да създадете хоризонтален водач, или от вертикалния линеал за вертикален водач. Водачите се прикрепят (snap) към позицията на курсора и показват точните си пикселни координати (напр. y: 200px). Плъзнете за препозициониране, щракнете двукратно за премахване.
Когато са поставени два успоредни водача, пикселното разстояние между тях се изчислява автоматично и се показва със свързваща скоба и етикет. Поставете два хоризонтални водача на разстояние 120px и ще видите етикет „120px“ между тях.
Хоризонталните водачи са сини, а вертикалните са червени — което ги прави лесни за разграничаване с един поглед, когато са поставени множество водачи. Всеки водач показва позицията си в малка значка с етикет.
Линеалите и водачите се рендират като прозрачен слой, който не засяга DOM на страницата, оформлението или JavaScript кода. Все още можете да кликвате през тях, за да взаимодействате с елементите на страницата. Слоят улавя само кликвания върху линеалите и дръжките на водачите.
Поставете толкова водачи, колкото са ви необходими — няма ограничение. Създайте пълна измервателна мрежа с хоризонтални и вертикални водачи, маркиращи всяка значима точка на подравняване на страницата.
Макетът казва, че хедърът е висок 80px и съдържанието започва на 120px отгоре. Поставете хоризонтални водачи на тези позиции и веднага проверете дали внедрената страница съответства на спецификациите на дизайна.
Поставете водачи в горната и долната част на повтарящи се елементи (карти, елементи от списък, секции), за да проверите дали всички имат еднакво разстояние. Непоследователните празнини между елементите стават веднага очевидни.
Поставете вертикална помощна линия в левия край на заглавието, след което проверете дали текстът на параграфа, бутоните и изображенията отдолу са подравнени по същата линия. Лошото подравняване дори от няколко пиксела се забелязва спрямо водача.
Поставете два вертикални водача в левия и десния край на елемента, за да измерите неговата ширина. Поставете два хоризонтални водача за височина. Автоматично изчисленото разстояние ви дава точните пикселни размери.
Поставете вертикален водач на общи ширини на контролни точки (768px, 1024px, 1280px) и променете размера на браузъра, за да проверите дали елементите се пренареждат правилно при всяка точка. Водачите остават фиксирани като визуални референтни точки.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Page Ruler. По горния и левия край на изгледа (viewport) се появяват прецизни линеали.
Щракнете и плъзнете от горния линеал, за да поставите хоризонтална помощна линия, или от левия линеал за вертикален водач. Водачът следва вашия курсор и се прикрепя към пикселната позиция, където го отпуснете.
Всеки водач показва своята позиция в пиксели (напр. y: 200px). Когато са поставени два успоредни водача, разстоянието между тях се показва автоматично с обозначена скоба.
Плъзнете всеки водач, за да го преместите на нова позиция — етикетите за разстояние се актуализират в реално време. Щракнете двукратно върху водач, за да го премахнете от страницата.
Щракнете отново върху иконата Page Ruler, за да скриете всички линеали и водачи. Позициите на вашите водачи се запазват, ако ги активирате отново по време на същата сесия.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
