- Trong ứng dụng của nhiều công ty, các phần tử UI như văn bản, biểu tượng, v.v. không được căn giữa đúng cách
- Dù có thể dễ dàng căn giữa bằng
flexvàgridcủa CSS
display: flex
justify-content: center /* căn giữa theo chiều ngang */
align-items: center /* căn giữa theo chiều dọc */
hoặc
display: grid
justify-items: center /* căn giữa theo chiều ngang */
align-items: center /* căn giữa theo chiều dọc */
Những yếu tố khiến việc căn giữa trở nên khó khăn
- Metrics của font đóng vai trò quan trọng. Phần lớn các font phổ biến không có bounding box khít hoàn toàn mà có khoảng đệm, nên rất khó căn giữa
- Do ảnh hưởng của thiết lập
line-height, việc căn chỉnh hai phần tử nằm trong hai container khác nhau gần như là bất khả thi - Việc căn biểu tượng bên cạnh văn bản cũng là một tác vụ rất khó. Thuộc tính
vertical-aligncủa CSS không thể căn biểu tượng theo cách có ý nghĩa - Icon font, tức kiểu nhét biểu tượng vào file font để sử dụng, khiến việc căn chỉnh còn khó hơn vì không thể điều chỉnh kích thước và padding
- Ngay cả designer cũng mắc sai lầm khi căn giữa một cách máy móc mà không xét đến hình dạng của biểu tượng
- Căn chỉnh theo chiều ngang cũng có thể sai nếu không chú ý kỹ
Giải pháp
Designer
- Nếu điều chỉnh bounding box của font khít với văn bản, việc căn giữa sẽ trở nên dễ hơn rất nhiều
- Figma hỗ trợ tính năng này (không phải mặc định)
- Vertical Trim : Cap Height to baseline
Nhà thiết kế font
- Nếu thiết lập font metrics sao cho khoảng cách giữa ascender và descender bằng 2 lần cap-height, lập trình viên sẽ dễ dàng căn giữa hơn
- Không cần thực sự kéo dài ascender/descender tới tận biên; chỉ cần các con số khớp là đủ
Lập trình viên web
- Cần biết trước font sẽ sử dụng (không hoạt động khi có thay thế font)
- Có thể căn giữa theo chiều dọc bằng cách thêm giá trị
padding-bottomđược tính từ font metrics - Với biểu tượng cũng vậy, có thể căn chỉnh bằng cách đặt
vertical-align: baselinerồi dịch xuống dưới một lượng được tính từ font metrics và kích thước biểu tượng
Icon font
- Làm ơn đừng dùng icon font nữa, hãy dùng định dạng ảnh thông thường
- Không gì dễ hơn việc căn chỉnh hai hình chữ nhật có chiều rộng và chiều cao rõ ràng
Hiệu chỉnh thị giác
- Lập trình viên chỉ có thể căn chỉnh những hình chữ nhật hoàn hảo về mặt toán học. Những gì cần chỉnh tay là đặt biểu tượng vào trong hình chữ nhật sao cho cân bằng về mặt thị giác
Ý kiến của GN⁺
- Bài viết cho thấy chỉ cần chú ý tới những chi tiết nhỏ cũng có thể cải thiện đáng kể chất lượng UI. Chỉ riêng việc căn giữa, tưởng như rất nhỏ nhặt, cũng có thể làm thay đổi cảm nhận tổng thể
- Điều này cho thấy không nên nghĩ đơn giản rằng "designer chỉ cần lo thiết kế, lập trình viên chỉ cần lo triển khai"; để có kết quả tốt, hai bên cần hiểu lĩnh vực của nhau và phối hợp với nhau
- Ngay từ đầu, sẽ tốt hơn nếu ở giai đoạn thiết kế đã căn chỉnh font metrics và làm mockup sao cho dễ triển khai đúng theo ý đồ của designer, đồng thời tránh khác biệt rendering giữa các trình duyệt
- Vấn đề này xuất hiện cả trong sản phẩm của những công ty lớn như Apple, Microsoft, Google, nhưng có vẻ phần lớn mọi người đều bỏ qua vì không để ý. Điều đó càng cho thấy việc ám ảnh với từng chi tiết tỉ mỉ là quan trọng
- Đặc biệt gần đây, khi dùng các công cụ tự động hóa kiểm thử UI, quy trình kiểm tra thủ công bằng mắt người thường bị lược bớt, nên kiểu vấn đề này có thể xảy ra thường xuyên hơn và cần được chú ý
3 bình luận
Cũng đáng để suy nghĩ xem việc căn giữa một cách máy móc có thực sự tốt hay không. Giống như con chuột được thiết kế công thái học với hai bên hơi khác nhau lại thoải mái hơn so với kiểu đối xứng trái phải, có lẽ đây cũng là yếu tố nên được quyết định dựa trên tính tiện dụng tổng thể.
Có vẻ mấu chốt là có thể xuất hiện kết quả khác với ý định. Ví dụ như tình huống nhấp chuột lại được tính ở phần đuôi chứ không phải ở phần mũi tên trên màn hình ấy.
Ý kiến trên Hacker News
Nội dung tóm tắt:
justifyvàaligncủa CSS