Tôi có nên tránh sử dụng “text-align: justify;” không?


76

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?


2
Đối với những người dùng Google trong tương lai: hãy kiểm tra chỉnh sửa trong câu trả lời được chấp nhận.
Francisco Presencia

Câu trả lời:


61

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 .


Các dòng sông cũng đáng chú ý hơn trong bố cục có độ tương phản cao. Nếu bạn sử dụng độ tương phản thấp hơn - giả sử khoảng 4-5 đến 1 cho độ sáng và cũng có một số độ tương phản màu sắc, các dòng sông ít được chú ý hơn nhiều. Bạn cũng có thể giảm hiệu ứng sông bằng cách tăng hàng đầu của bạn. Các đường dài hơn yêu cầu dẫn lớn hơn để giúp mắt theo dõi.
Sherwood Botsford

25

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.


4
Bạn đã nghe nói về gạch nối [ code.google.com/p/hyphenator ] chưa? Có lẽ bạn nên chỉnh sửa câu trả lời của mình để đề cập đến nó, nếu bạn nghĩ nó đáng được đề cập.
ShreevatsaR

Tôi không đồng ý. Tôi thích văn bản được căn chỉnh và miễn là hầu hết các dòng dài khoảng 50-60 em, hầu hết các trình duyệt đều thực hiện một cách hợp lý.
Sherwood Botsford

13

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.


Đã bình chọn. Tuy nhiên, khuyến nghị phổ biến dường như là khoảng 10 từ mỗi dòng để có thể dễ đọc / dễ đọc tối đa.
Andy Ford

4
Nếu bạn muốn chính xác hơn, nó là ~ 65 ký tự mỗi dòng.
dylanfm

cảm ơn, dylanfm. Đó là thước đo đáng tin cậy hơn do độ chính xác của nó =)
Andy Ford

Nói chung là 10 từ để dễ đọc nhưng theo kinh nghiệm của tôi thì hơi nhẹ đối với văn bản hợp lý.
allesklar

6

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.


4

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ế.


1

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) ...)


1

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.



0

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.


0

Ơ ... 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 ...


0

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ề


2
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ẻ
Yi Jiang

nó tồn tại - đó là một giá trị "microsoft".
J-16 SDiZ

4
@ J-16SDiZ nên nó cũng có thể không tồn tại: P
Sphvn 30/11/12

2
@YiJiang 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. :)
Jordan Grey

0

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.


3
Bạn đã bỏ lỡ phần quan trọng nhất - nó hoạt động không chính xác chỉ đối với hộp chú thích bảng . Nếu đây là sự thật cho tất cả các yếu tố đó không ai sẽ sử dụng thuộc tính này
Yi Jiang

vâng. đáng lẽ phải đọc xong ... tôi vẫn tình cờ gặp điều này trong IE7 và không sử dụng bất kỳ bảng nào trong dự án của mình. Thật kỳ lạ.
thường xuyên

0

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:

  • Bạn cần một số lượng từ hợp lý trên một dòng.
  • Một từ lớn ở cuối dòng có thể gây ra vấn đề.

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

  • tự động (mặc định)
  • xen vào
  • liên ký tự (+ phân phối vì lý do kế thừa)
  • không ai

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:

  • Độ dài dòng tối đa 65 rem
  • phông chữ nội dung tăng lên 110%
  • tăng dẫn đầu lên 125%
  • Văn bản hợp lý.

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.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.