Có lý do gì để tránh sử dụng text-align: justify;không?
Nó có làm giảm khả năng đọc hoặc gây ra vấn đề không?
Câu trả lời:
Thứ nhất, đây hoàn toàn là một vấn đề và giải pháp liên quan đến thiết kế. Thiết kế lưới của bạn chỉ định xem có cần văn bản giải thích hay không. Tôi nghĩ rằng chỉ căn chỉnh biện minh không có ảnh hưởng lớn đến khả năng sử dụng. Kiểu chữ xấu làm cho văn bản khó đọc là điều làm giảm khả năng sử dụng. Điều đó nói rằng, hãy đảm bảo rằng bạn có độ tương phản rõ ràng và sự cân bằng tốt về khoảng cách trong loại của bạn. Kích thước phông chữ cũng quan trọng.
Trang web này là một nỗ lực thành công trong việc biện minh cho văn bản trực tuyến. Vì bạn không thể kiểm soát khoảng cách giữa các chữ cái và từ gần như bằng CSS với InDesign, nên sẽ khó hơn rất nhiều để căn chỉnh văn bản và không để 'dòng sông' khoảng trắng chạy xuống hàng của bạn, điều này xảy ra khi khoảng cách giữa các từ vượt quá khoảng cách giữa các dòng. Những điều gây khó khăn cho việc xác minh văn bản: từ dài, độ rộng hàng không chứa đủ từ, và quá nhiều tương phản giữa văn bản và màu nền; chúng làm cho các con sông có vẻ rộng hơn và rõ ràng hơn.
Lý tưởng về kiểu chữ là có một khối văn bản đồng đều, trong đó nếu bạn nheo mắt khối văn bản sẽ trở thành một khối đồng nhất. Vì vậy, nếu bạn giữ văn bản ở khoảng 10px và 60% màu xám trên nền trắng và có các hàng vừa với khoảng 20 từ, căn lề căn lề sẽ không trông xấu xí. Nhưng hãy nhớ rằng điều này không làm gì để cải thiện khả năng sử dụng. Văn bản nhỏ, tương đối nhạt gây khó chịu cho rất nhiều người, đặc biệt là những độc giả lớn tuổi.
Tôi nên lưu ý rằng với ­(dấu gạch nối mềm) phân tách chính xác các từ dài gây rắc rối như superrawesome, bạn có thể bắt chước cách sắp chữ thích hợp (ví dụ: InDesign). Có rất nhiều thứ có sẵn để giúp bạn làm điều này. Tôi muốn giới thiệu logic để ẩn, thao tác và hiển thị văn bản được thực hiện ở phía máy khách, có lẽ với điều này .
Chỉnh sửa : Như những người khác đề cập bên dưới, hiện có thể sử dụng dấu gạch nối css , ngoại trừ trường hợp không khả thi (không có trong Chrome). Thêm vào đó, css4 thậm chí còn cung cấp nhiều quyền kiểm soát hơn .
text-align: justify hiện không được sử dụng trong các trình duyệt. Họ không giỏi trong việc xử lý các chi tiết nhỏ bên trong và kết quả đầu ra chứa rất nhiều sông và không có sự hỗ trợ cho dấu gạch nối (ngoài dấu gạch ngang mềm).
Lưu ý ở trên đã được viết cách đây 4,5 năm. Mọi thứ đang dần thay đổi ... http://caniuse.com/#feat=css-hyphens
Chỉnh sửa: Dấu gạch nối đã thu hút sự chú ý của tôi trong phần bình luận của câu trả lời này. Có vẻ như nó làm cho căn chỉnh văn bản có giá trị sử dụng, hãy kiểm tra các trang web sử dụng nó. Bạn có thể muốn sử dụng javascript để áp dụng text-align justify trước khi sử dụng script này để những đoạn không có javascript không bị bắt.
Chỉnh sửa 2:
CSS hiện cho phép gạch nối với thuộc hyphenstính [ hỗ trợ trình duyệt ]. PPK hiện đang nói rằng hãy thêm nó vào bảng định kiểu của bạn , trong khi Eric Meyer nói chỉ thêm nó cho thiết bị di động .
Chỉnh sửa 3: Một cái nhìn tổng quan về những thứ hiện có cho chúng ta, với một số SASS.
Các vấn đề do những người khác đưa ra về căn chỉnh đều phổ biến hơn với các cột hẹp. Nếu các cột của bạn đủ rộng so với kích thước phông chữ và các thông số khác thì bạn có thể căn chỉnh văn bản. Giả sử bạn muốn trung bình tối thiểu 12 đến 15 từ trên mỗi dòng. Càng nhiều càng tốt.
Không có lý do kỹ thuật nào để không - đó hoàn toàn là một quyết định thiết kế. Nhiều người thấy rằng văn bản hợp lý khó đọc hơn, nhưng tôi đoán nó phụ thuộc vào tình huống của bạn. Mặc dù nó hoạt động tốt cho in ấn, nói chung các trình duyệt web không cung cấp đủ quyền kiểm soát đối với đầu ra cuối cùng của văn bản để đảm bảo rằng những gì bạn đang phục vụ sẽ không giống như những thứ tào lao trên màn hình của một số người.
Lựa chọn tốt nhất của bạn là tránh biện minh.
Tôi không thể nghĩ ra lý do thuyết phục tại sao không biện minh cho văn bản - tại một thời điểm nhất định, khối lượng và chiều rộng của nội dung gần như đòi hỏi nó phải được biện minh. Tất nhiên, bạn sẽ gặp vấn đề với nội dung bao gồm một số tổ hợp từ nhất định, nhưng theo tôi nếu bạn nhìn thấy những dòng sông và khoảng trống lớn bất thường giữa các từ thì bạn hoàn toàn có một vấn đề khác - một trong những vấn đề dễ đọc và rõ ràng.
Điều tôi sẽ tránh, bằng mọi giá, là văn bản chính giữa. Tôi không nghĩ rằng có một lá cờ đỏ lớn về thiết kế web vô nghĩa hơn thế.
Tôi thích căn trái hơn (text-align: left) vì nó thường dễ đọc hơn. Việc đọc các từ cách đều nhau cũng nhanh hơn, vì vậy tôi nghe thấy. Trừ khi bạn có lý do phong cách để sử dụng justify, hãy giữ nó ở bên trái, bên phải hoặc chính giữa. Đặc biệt đối với nội dung văn bản, hãy sử dụng bên trái. (Trên thực tế, bạn muốn một cái gì đó như "chuyển tiếp" cho văn bản theo hướng khác (ví dụ: tiếng Do Thái) ...)
Giống như bất kỳ câu hỏi thiết kế web nào ... nó phụ thuộc. Như đã được đề xuất, văn bản được căn chỉnh thường không có kết quả tốt trong các cột hẹp. Tôi khuyên bạn nên chống lại nó như một quy tắc chung trong thanh bên vì thanh bên thường hẹp.
Với nội dung thường được khuyến nghị là 10 từ trên mỗi dòng (hoặc với bất kỳ số lượng nào trên mức đó), bạn có thể sẽ có được văn bản vừa phải và hầu hết thời gian nó trông khá đẹp trừ khi bạn đang sử dụng nhiều từ và / hoặc chuỗi.
Tôi nghĩ rằng tôi đã đưa trang web này lên StackOverflow trước đây, nhưng Jon Tan sử dụng văn bản hợp lý trong nội dung của anh ấy (trong các bài báo) và nó trông tuyệt vời 99,99% thời gian.
Không nên sử dụng biện minh mà không có dấu gạch nối. Đây là một thư viện gạch nối dựa trên PHP và một cổng của thư viện này tới một plugin WordPress: wp-Typography .
Tôi nghĩ rằng nó hoàn toàn ổn trên bản in, nhưng nó không ổn trên hầu hết các trình duyệt Web, do thiếu kiểm soát tốt về khoảng cách và dấu gạch nối. Người đánh máy thậm chí có thể chơi một chút về khoảng cách giữa các chữ cái hoặc sự thu hẹp phông chữ trong một số trường hợp, vì các trang / cột (ít nhất là trong tạp chí) có thể được tinh chỉnh.
Ơ ... Không ...!
[nghiêm túc] WordPress sử dụng justify và tôi nghĩ đó là một tuyên bố khá mạnh mẽ về việc nó có làm giảm khả năng đọc hay không ...
Bạn cũng có thể sử dụng text-justify: báo. Thẻ css text-justify giúp bạn kiểm soát cách bạn bao quanh văn bản khi bạn căn lề
text-justifytồn tại trong phiên bản mới nhất của bản nháp mô-đun Văn bản CSS3, nhưng giá trị của newspaperkhông (và có thể chưa bao giờ) tồn tại. Ngoài ra, đây là những CSS tính , không thẻ
text-justify: newspapernằm trong CR năm 2003 cho Văn bản CSS3 , vì vậy không hoàn toàn chính xác khi nói rằng nó chưa bao giờ * tồn tại — bất kể nó đã từng là độc quyền hay chưa. :)
Cần lưu ý rằng Internet Explorer (ít nhất) lên đến phiên bản 8 không hiển thị text-align: justifychính xác. Thay vào đó, nó được hiểu là text-align: center.
Đây là thêm thông tin: text-align: justify
Khiến tôi đau đầu tìm hiểu tại sao IE cứ canh giữa các thứ. Có lẽ nó tiết kiệm cho người khác một thời gian.
Biện minh văn bản có thể được thực hiện theo nhiều cách.
Vài định nghĩa: Điều chỉnh khoảng cách giữa các từ là "theo dõi" Điều chỉnh khoảng cách giữa các ký tự là "kerning" Các chương trình bố cục tốt thực hiện một số kerning tự động và nó thay đổi theo từng cặp chữ cái. Va của biến có thể được đặt gần hơn so với xa về chính xác. Các phông chữ tốt đã tích hợp sẵn các bảng gợi ý kerning để hỗ trợ quá trình này.
Trong những ngày đầu của phông chữ monospace, nó được thực hiện bằng cách chèn thêm khoảng cách giữa các từ. Điều này làm cho đầu ra trông rất khó hiểu. Nếu bạn có 4 khoảng trắng ở cuối dòng và 6 khoảng trắng ở dòng, 4 trong số chúng sẽ trở thành khoảng trắng kép.
Phông chữ Monospace không nên hợp lý.
Với phông chữ có độ rộng thay đổi, chúng ta có khoảng trắng em, khoảng trắng en, v.v. và do đó, không gian có thể được phân phối tốt hơn.
Tôi nghĩ đây là nơi hầu hết các trình duyệt hiện nay. Nó hoạt động hợp lý trong hầu hết thời gian. Để nó hoạt động tốt, cần có các điều kiện sau:
Từ trung bình trong tiếng Anh là 5 ký tự. Vì vậy, trung bình bạn sẽ có 5 ký tự (từ 5 ký tự cộng với khoảng trắng sẽ không phù hợp nên sẽ bị chuyển sang dòng tiếp theo)
Nếu bạn có 10 từ trên dòng, thì bạn cần thêm khoảng một nửa khoảng trắng tiêu chuẩn vào mỗi khoảng cách giữa các từ.
Nếu từ cuối cùng là một từ dài, như "nhức đầu" và không có chỗ cho từ đó, thì bây giờ bạn có 10 khoảng trắng để phân phối. Điều này bắt đầu có vẻ tồi tệ.
Đây là lúc từ điển gạch nối phát huy tác dụng. Dấu gạch nối có thể được thực hiện bằng thuật toán, nhưng vẫn có đủ trường hợp ngoại lệ mà từ điển sẽ giúp ích rất nhiều. (Có một ký tự đặc biệt cho dấu gạch ngang mềm cho những từ không có trong từ điển của bạn.)
Dấu gạch nối có thể tách một từ để dòng điền đều hơn.
Theo kinh nghiệm, tôi quyết định rằng độ dài dòng 65 em tạo ra một sự thỏa hiệp tốt. Điều này cho 11-13 từ trên mỗi dòng rất nhiều thời gian.
Một cách tiếp cận khác để biện minh là chia nhỏ không gian giữa các ký tự. Điều này tránh được một số vấn đề ở trên, nhưng vẫn có vẻ kỳ lạ nếu bạn đang phân phối nhiều không gian trong dòng không đủ. Bạn thấy điều này trên các tờ báo bây giờ và sau đó nơi một từ dường như có một khoảng trống đầy đủ giữa mỗi ký tự. Đây là một lập luận tốt cho một dòng dài hơn.
Các chương trình sắp chữ tốt (InDesign, * TeX, Framemaker) thực hiện sự kết hợp giữa các khoảng trống thừa trong các khoảng trống giữa các ô chữ và các khoảng trống thừa nhỏ giữa các ký tự.
Có một đứa trẻ mới trên khối, text-justify có thể được sử dụng trong CSS để sửa đổi việc sử dụng text-align: justify. Trên danh nghĩa, nó chấp nhận các tùy chọn
CanIuse https://caniuse.com/#search=text-justify Nhóm làm việc CSS https://drafts.csswg.org/css-text-3/#text-justify-property
CanIuse báo cáo sự tuân thủ chỉ dành cho Firefox ngay bây giờ, Chrome hỗ trợ nó nhưng yêu cầu bạn bật các tính năng thử nghiệm. CanIuse tuyên bố rằng hỗ trợ có lỗi. Truy cập trang web theo dõi lỗi Chromium, tuyên bố rằng nó đã được khắc phục. Đi tìm hình. Chưa thử nghiệm.
Các điểm thực dụng khác:
Tôi đã thực hiện bốn thay đổi đối với biểu định kiểu của trang web của mình:
Kết quả là thời gian trên trang web và số trang mỗi phiên tăng gấp đôi.
Giai thoại, nhưng có thể đáng để bạn thử nghiệm.