Pixel Ruler - Thước đo Pixel

Tính năng nổi bật

• Thước kéo thả bằng chuột, đi theo con trỏ trong toàn bộ khu vực đo
• Chuyển giữa thước ngang và thước dọc bằng một công tắc
• Đổi chiều dài thước từ 200 tới 1000 pixel theo bước 50
• Vạch chia mỗi 10 pixel, vạch trung bình ở mốc 50 và vạch chính kèm số ở mỗi 100 pixel
• Hai đường gióng ngang dọc cắt tại gốc thước để canh mép phần tử
• Hiển thị tọa độ x và y hiện tại của thước theo pixel
• Nút đưa thước về vị trí gốc khi kéo lạc ra ngoài
• Chạy hoàn toàn trên trình duyệt, không cài phần mềm và không cần quyền truy cập màn hình

Khi nào cần một cây thước pixel ngay trong trình duyệt

Có những lúc bạn chỉ cần biết một khoảng cách chừng bao nhiêu pixel mà không đáng để mở công cụ chuyên dụng: ước lượng chiều cao một dải banner trong ảnh chụp màn hình khách gửi, kiểm tra xem khoảng cách giữa hai khối trong bản thiết kế có đúng bội số 8 hay không, hay dạy cho một người mới hiểu 24 pixel thực sự trông rộng cỡ nào. Thước pixel trên web giải quyết đúng nhóm việc đó: mở là dùng, không cài đặt, không xin quyền, và quan trọng là nó cho bạn cảm giác trực quan về độ lớn của con số thay vì chỉ đọc số trong bảng thuộc tính. Điều cần nói rõ ngay từ đầu là phạm vi: thước nằm trong trang web nên chỉ đo được những gì bạn đưa vào trong khu vực đo hoặc đặt cạnh nó, không đo được cửa sổ ứng dụng khác hay toàn màn hình. Trình duyệt không cho phép một trang vẽ đè lên phần còn lại của hệ điều hành, và đó là giới hạn về bảo mật chứ không phải thiếu sót của công cụ.

Lợi ích khi sử dụng

• •Mở là dùng ngay, không cài phần mềm và không xin quyền chụp màn hình
• •Thấy trực quan độ lớn thật của các con số quen thuộc như 16, 24 hay 48 pixel
• •Kiểm tra nhanh một khoảng cách có bám thang 8 pixel hay không
• •Hai đường gióng giúp canh mép chuẩn hơn nhiều so với ước lượng bằng mắt
• •Dùng được cả thước ngang và thước dọc mà không phải xoay màn hình

Cách dùng thước đo pixel

1. 1Chọn hướng thước bằng công tắc chiều ngang, tắt đi là thước chuyển thành dọc.
2. 2Kéo thanh chiều dài tới mức bao trùm được khoảng bạn cần đo, tối đa 1000 pixel.
3. 3Nhấn giữ chuột lên thân thước rồi kéo sao cho vạch 0 trùng với mép trái hoặc mép trên của đối tượng cần đo.
4. 4Bật đường gióng để có hai đường mảnh cắt nhau tại gốc thước, dùng canh mép cho chính xác thay vì ước lượng bằng mắt.
5. 5Đọc số ở vạch chính gần nhất rồi cộng thêm số vạch nhỏ, mỗi vạch nhỏ là 10 pixel.

Pixel CSS khác pixel vật lý, và đây là chỗ sai nhiều nhất

Con số thước hiển thị là pixel CSS, tức đơn vị mà trình duyệt và mọi tệp CSS đang dùng, chứ không phải điểm ảnh vật lý trên tấm nền. Trên màn hình mật độ cao, một pixel CSS được vẽ bằng nhiều điểm ảnh vật lý: màn hình Retina của Apple và phần lớn màn hình laptop hiện đại có tỷ lệ 2, nhiều điện thoại Android có tỷ lệ 2,625 hoặc 3. Bạn kiểm tra được tỷ lệ này bằng cách gõ window.devicePixelRatio trong bảng điều khiển của trình duyệt. Hệ quả thực tế: một ảnh rộng đúng 300 pixel vật lý đặt vào khung 300 pixel CSS trên màn hình tỷ lệ 2 sẽ bị kéo giãn và trông mờ, vì trình duyệt cần 600 điểm ảnh để lấp đầy khung đó. Đây là lý do bộ ảnh giao diện luôn có bản 2x và 3x, và là lý do thuộc tính srcset cùng bộ mô tả 1x, 2x, 3x tồn tại. Khi đo bằng thước này để cắt ảnh, hãy nhớ nhân con số đo được với tỷ lệ màn hình trước khi xuất tệp.

Thước web đo được gì và không đo được gì

Thước nằm bên trong một khu vực đo cao 400 pixel của chính trang này, nên nó chỉ có ý nghĩa với những gì hiển thị trong hoặc cạnh khu vực đó. Nó không đo được cửa sổ phần mềm khác, không đo được vùng khác của màn hình, và không đo được phần tử trên một website khác. Muốn đo phần tử của một trang bất kỳ, cách chuẩn là mở công cụ dành cho nhà phát triển của trình duyệt, chọn phần tử và đọc trực tiếp chiều rộng, chiều cao, padding, margin trong mô hình hộp; con số ở đó là con số thật mà trình duyệt tính toán, không phải ước lượng. Muốn đo trên một ảnh chụp màn hình do khách gửi, hãy mở ảnh ở tỷ lệ 100 phần trăm rồi đặt cạnh khu vực đo, hoặc dùng chính công cụ xem ảnh có sẵn thước. Cuối cùng, nếu bạn phóng to hay thu nhỏ trình duyệt bằng tổ hợp phím, mọi con số sẽ lệch theo tỷ lệ phóng, nên hãy đưa mức phóng về đúng 100 phần trăm trước khi đo.

Những mốc pixel nên thuộc lòng khi làm giao diện

Về điểm ngắt màn hình, bộ mốc phổ biến nhất hiện nay là 640, 768, 1024, 1280 và 1536 pixel, tương ứng điện thoại nằm ngang, máy tính bảng, máy tính bảng ngang, laptop và màn hình lớn. Chiều rộng khối nội dung trên máy tính để bàn thường đặt trong khoảng 1140 tới 1280 pixel, còn chiều rộng cột chữ nên giới hạn quanh 640 tới 720 pixel để mỗi dòng rơi vào khoảng 60 tới 75 ký tự. Về vùng chạm, hướng dẫn giao diện của Apple đặt mức tối thiểu 44 nhân 44 điểm, Material Design của Google đặt 48 nhân 48, còn tiêu chuẩn tiếp cận WCAG 2.2 đặt mức tối thiểu 24 nhân 24 pixel CSS cho mục tiêu bấm. Về chữ, 16 pixel là cỡ tối thiểu cho thân bài trên web và cũng là mốc mà trình duyệt di động dùng để quyết định có tự phóng to khi người dùng chạm vào ô nhập hay không. Đặt ô nhập cỡ chữ dưới 16 pixel là nguyên nhân phổ biến khiến trang bị nhảy khi gõ trên iPhone.

Thang 4 và 8 pixel: vì sao nên bám bội số

Hầu hết hệ thống thiết kế hiện nay chọn 8 pixel làm đơn vị cơ sở cho khoảng cách và kích thước, với 4 pixel làm nửa bước cho các chi tiết nhỏ. Lý do không phải thẩm mỹ mà là kỹ thuật và tổ chức. Về kỹ thuật, 8 chia hết cho 2 và 4 nên khi nhân với tỷ lệ màn hình 1,5 hay 2 vẫn ra số nguyên, tránh được các mép bị làm mượt thành nửa pixel gây mờ. Về tổ chức, khi cả nhóm chỉ chọn trong tập 4, 8, 12, 16, 24, 32, 48, 64 thì số quyết định phải bàn giảm hẳn, và người lập trình nhìn bản thiết kế là đoán được giá trị thay vì phải hỏi từng khoảng. Dùng thước này để tự kiểm tra là cách nhanh: nếu bạn đo được một khoảng 22 pixel thì gần như chắc chắn đó là một khoảng đặt bằng cảm tính, và nên kéo về 24. Ngoại lệ hợp lý là các giá trị đến từ chiều cao dòng chữ, vốn phụ thuộc cỡ chữ nhân hệ số giãn dòng nên hiếm khi rơi đúng bội số 8.

Từ pixel màn hình sang kích thước in: chuyện của DPI

Pixel là đơn vị không có kích thước vật lý cố định, nên câu hỏi một trăm pixel dài bao nhiêu xăng ti mét chỉ có nghĩa khi kèm mật độ điểm ảnh. Với in ấn, mật độ tiêu chuẩn là 300 điểm mỗi inch, nghĩa là ảnh muốn in đẹp trên khổ 10 nhân 15 xăng ti mét cần khoảng 1181 nhân 1772 pixel. Con số 72 điểm mỗi inch mà nhiều người nhắc tới là di sản của màn hình đời cũ và gần như không còn ý nghĩa với màn hình hiện đại, nhưng vẫn nằm mặc định trong nhiều phần mềm đồ họa nên hay gây hiểu nhầm. Khi đưa một ảnh từ web sang in, đừng nhìn thuộc tính DPI ghi trong tệp mà hãy nhìn số pixel thật: ảnh 800 nhân 600 pixel dù ghi 300 DPI cũng chỉ in đẹp ở khổ khoảng 6,8 nhân 5,1 xăng ti mét. Thước pixel giúp bạn xác định vùng cần cắt theo pixel, còn việc chuyển sang đơn vị in là phép chia đơn giản cho 300 rồi nhân 2,54 để ra xăng ti mét.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• thước đo pixel online
• pixel ruler online
• đo kích thước pixel trên màn hình
• công cụ đo pixel
• pixel css là gì
• devicepixelratio là gì
• màn hình retina 2x 3x
• ảnh bị mờ trên retina
• srcset 2x 3x
• kích thước vùng chạm tối thiểu
• breakpoint responsive phổ biến
• thang 8 pixel design system
• đo phần tử bằng devtools
• chiều rộng container 1200px
• cỡ chữ 16px trên mobile
• đổi pixel sang cm
• 300 dpi in ấn
• đo khoảng cách trong thiết kế
• thước ảo trên trình duyệt
• công cụ đo pixel miễn phí