"text-align : justify;"를 사용하지 않아야합니까?
사용을 피해야 할 이유가 text-align: justify;있습니까?
가독성을 떨어 뜨리거나 문제를 일으키는가?
첫째, 이것은 순전히 디자인 관련 문제 및 해결책입니다. 그리드 디자인은 텍스트 양쪽 맞춤이 필요한지 여부를 지정합니다. Justify align만으로는 사용성에 큰 영향을 미치지 않는다고 생각합니다. 텍스트를 읽을 수 없게 만드는 잘못된 타이포그래피는 사용성을 저하시킵니다. 즉, 당신의 유형에서 단단한 대비와 적절한 간격의 균형이 있는지 확인하십시오. 글꼴 크기도 중요합니다.
이 사이트 는 온라인에서 텍스트를 정당화하기위한 성공적인 시도입니다. InDesign에서 할 수있는 것처럼 CSS로 글자와 단어 사이의 공백을 거의 제어 할 수 없기 때문에 텍스트를 정당화하는 것이 훨씬 더 어렵고, 단어 사이의 공백이있을 때 발생하는 공백의 '강'이 행 아래로 흐르지 않도록합니다. 줄 사이의 공백을 초과합니다. 텍스트의 양쪽 정렬을 어렵게 만드는 것 : 긴 단어, 충분한 단어를 포함하지 않는 행 너비, 텍스트와 배경색 간의 너무 많은 대비; 강이 더 넓고 뚜렷하게 보이게합니다.
인쇄상의 이상은 텍스트 블록을 가늘게 뜨면 텍스트 블록이 균일 한 단색 음영이되는 균일 한 텍스트 블록을 갖는 것입니다. 따라서 텍스트를 흰색 배경에 약 10px 및 60 % 회색으로 유지하고 약 20 단어에 맞는 행이있는 경우 양쪽 맞춤이보기 흉하게 보이지 않아야합니다. 그러나 이것은 유용성을 향상시키는 데 아무런 영향을 미치지 않습니다. 작고 비교적 가벼운 텍스트는 많은 사람들, 특히 나이가 많은 독자를 짜증나게합니다.
내가 함께 있음을 유의하십시오 ­(소프트 하이픈) 제대로 할 수 모방 적절한 조판 (예를 들어, 인디자인) superawesome처럼 긴 귀찮은 단어를 분리. 이 작업을 수행하는 데 도움이되는 많은 것들이 있습니다. 나는 숨어 조작, 아마와, 클라이언트 측에서 수행해야 할 텍스트를 표시하기위한 논리를 추천 할 것입니다 이 .
편집 : 다른 사람들이 아래에서 언급했듯이, 가능하지 않은 경우를 제외하고는 CSS 하이픈을 사용할 수 있습니다 (크롬이 아님). 또한 css4는 더 많은 제어 기능을 제공합니다 .
text-align : justify는 현재 브라우저에서 사용해서는 안됩니다 . 그들은 내부의 세부 사항을 잘 처리하지 못하고 출력에 많은 강이 포함되고 하이픈을 지원하지 않습니다 (소프트 하이픈 제외).
위의 메모 는 4.5 년 전에 작성되었습니다. 상황이 천천히 변하고 있습니다 ... http://caniuse.com/#feat=css-hyphens
편집 : 이 답변의 의견에서 하이픈 레이터 가 내 관심을 끌었습니다. 사용할 가치가있는 텍스트 정렬을 정당화하는 것 같습니다. 사용하는 사이트를 확인하십시오. 이 스크립트를 사용하기 전에 javascript를 사용하여 text-align justify를 적용하여 javascript가없는 사람이 잡히지 않도록 할 수 있습니다.
편집 2 : CSS는 이제 속성 [ 브라우저 지원 ]을 사용하여 하이픈 연결 을 허용합니다 . PPK는 이제 스타일 시트 에 추가 하라고 말하고있는 반면 Eric Meyer는 모바일 용으로 추가 한다고 말합니다 .hyphens
편집 3 : 일부 SASS를 사용하여 현재 사용할 수있는 항목에 대한 간단한 개요 입니다.
정렬 정당화에 대해 다른 사람들이 제기 한 문제는 좁은 열에서 더 많이 발생합니다. 열이 글꼴 및 기타 매개 변수의 크기와 관련하여 충분히 넓다면 텍스트를 양쪽 정렬해도됩니다. 평균적으로 한 줄에 최소 12 ~ 15 개의 단어를 원한다고 가정 해 보겠습니다. 많을수록 좋습니다.
기술적 인 이유는 없습니다. 순전히 디자인 결정입니다. 많은 사람들이 정당한 텍스트를 읽기가 더 어렵다고 생각하지만 상황에 따라 다릅니다. 인쇄에서는 잘 작동하지만 일반적으로 웹 브라우저는 텍스트의 최종 출력을 충분히 제어하지 못하여 제공하는 내용이 일부 사용자의 화면에서 쓰레기처럼 보이지 않도록 보장합니다.
최선의 선택은 정당성을 피하는 것입니다.
나는 텍스트를 정당화하지 않는 설득력있는 이유를 생각할 수 없다. 특정 시점에서 콘텐츠의 양과 너비는 거의 정당화되어야한다고 요구한다. 물론 특정 단어 조합으로 구성된 콘텐츠에 문제가있을 수 있지만, 강이 있고 단어 사이에 비정상적으로 큰 공백이 있으면 가독성과 명확성이라는 문제가 완전히 다릅니다.
내가 피하고 싶은 것은 중앙에있는 본문 텍스트입니다. 나는 그보다 아마츄어 웹 디자인의 더 큰 붉은 깃발이 있다고 생각하지 않습니다.
일반적으로 더 읽기 쉽기 때문에 왼쪽 정렬 (text-align : left)을 선호합니다. 균등 한 간격의 단어를 읽는 것이 더 빠르기 때문에 들었습니다. 양쪽 맞춤을 사용해야하는 문체적인 이유가없는 한 왼쪽, 오른쪽 또는 가운데로 유지하십시오. 특히 본문의 경우 왼쪽을 사용합니다. (사실, 다른 방향 (예 : 히브리어)의 텍스트에 대해 "forward"와 같은 것을 원할 것입니다 ...)
웹 디자인 질문과 마찬가지로 ... 제안 된대로 양쪽 맞춤 텍스트는 일반적으로 좁은 열에서보기 좋게 표시되지 않습니다. 사이드 바는 일반적으로 좁기 때문에 사이드 바의 일반적인 규칙으로 반대하는 것이 좋습니다.
한 줄에 자주 권장되는 10 개의 단어 (또는 그 이상의 양)의 본문 카피를 사용하면 정당한 텍스트를 제거 할 수 있고 정말 오랫동안 많이 사용하지 않는 한 대부분의 경우 상당히보기 좋게 보일 수 있습니다. 단어 및 / 또는 문자열.
이전에이 사이트를 StackOverflow에 게시 한 적이 있다고 생각하지만 Jon Tan 은 본문에서 정당화 된 텍스트 (기사 내)를 사용하며 99.99 %의 시간 동안 멋지게 보입니다.
하이픈없이 양쪽 맞춤을 사용해서는 안됩니다. 다음은 PHP 기반 하이픈 연결 라이브러리 와이 라이브러리를 WordPress 플러그인 wp-Typography 로 포팅 합니다.
나는 인쇄 상 완벽하게 괜찮다고 생각하지만 대부분의 웹 브라우저에서는 간격과 하이픈을 세밀하게 제어하지 않아서 투박합니다. 타이포 그래퍼는 페이지 / 열 (적어도 잡지에서는)을 미세 조정할 수 있기 때문에 경우에 따라 문자 간격이나 글꼴 축소를 약간 재생할 수도 있습니다.
어 ... 안돼 ...!
[진지하게] 워드 프레스는 정당화를 사용하는데, 가독성을 떨어 뜨리는 지 여부와 관련하여 매우 강력한 진술이라고 생각합니다.
text-justify : newspaper를 사용할 수도 있습니다. text-justify css 태그는 양쪽 맞춤시 텍스트 줄 바꿈 방법을 제어하는 데 도움이됩니다.
Internet Explorer (적어도) 버전 8까지는 text-align: justify올바르게 렌더링되지 않는다는 점을 언급해야 합니다. 대신 text-align: center.
더 많은 정보 : text-align : justify
Caused me some headaches to find out why IE kept centering stuff. Maybe it saves somebody else some time.
Text justification can be done in several ways.
Couple of definitions: Adjusting the spacing between words is "tracking" Adjusting the spacing between characters is "kerning" Good layout programs do some kerning automatically, and it varies by letter pair. The va of variable can be kerned closer than the xa in exact. Good fonts have built in tables of kerning hints to aid in this process.
In early days of monospace fonts it was done by inserting extra spaces between words. This made for very clunky looking output. If you had 4 spaces at the end of the line, and 6 spaces in the line, 4 of them would become double spaces.
Monospace fonts shouldn't be justified.
With variable width fonts, we have em spaces, en spaces, etc, and so the space could be better distributed.
I think this is where most browsers are now. It works reasonably well most of the time. For it to work well the following conditions need to hold:
- You need a reasonable number of words on a line.
- A large word at the end of the line can make problems.
The average word in English is 5 characters. So on the average you will have 5 characters (the 5 character word plus space wouldn't fit so gets bumped to the next line)
If you have 10 words on the line, then you need to add about half a standard space to each interword gap.
If the last word is a long one, like "headaches" and there isn't room for it, now you have 10 spaces to distribute. This starts to look bad.
This is where a hyphenation dictionary comes into play. Hyphenation can be done by algorithm, but there are enough exceptions that having a dictionary helps a lot. (There is a special character for soft hyphens for words not in your dictionary.)
Hyphenation can split a word so that the the line fills more evenly.
Empirically I decided that a 65 em line length made a good compromise. This gives 11-13 words per line a lot of the time.
Another approach to justification is to split the space up between characters. This avoids some of the problems above, but still looks odd if you are distributing a lot of space in not enough line. You see this in newspapers now and then where a word seems to have a full space between each character. This is a good argument for a longer line.
Good typesetting programs (InDesign, *TeX, Framemaker) do a combination of extra space in interword gaps, and tiny extra spaces between characters.
There is a new kid on the block, text-justify that can be used in CSS to modify the use of text-align: justify. Nominally it accepts the options
- auto (default)
- interword
- inter-character (+ distribute for legacy reasons)
- none
CanIuse https://caniuse.com/#search=text-justify CSS working group https://drafts.csswg.org/css-text-3/#text-justify-property
CanIuse reports compliance only for Firefox right now, Chrome supports it but requires that you enable experimental features. CanIuse claims that support is buggy. Going to the Chromium bug tracking site, claims that it's fixed. Go figure. Haven't tested.
Other pragmatic points:
I made four changes to my site's style sheet:
- Maximum line length of 65 rem
- body font increase to 110%
- leading increase to 125%
- Justified text.
The result was that time on site and pages per session doubled.
Anecdotal, but may be worth your own test.
참고URL : https://stackoverflow.com/questions/315845/should-i-avoid-using-text-align-justify
'program tip' 카테고리의 다른 글
| 변수가 Moment.js 객체인지 테스트하는 방법은 무엇입니까? (0) | 2020.10.17 |
|---|---|
| 새 프로젝트는 log4j 대신 logback을 사용해야합니까? (0) | 2020.10.17 |
| JavaScript에서 현재 줄 번호를 어떻게 확인할 수 있습니까? (0) | 2020.10.17 |
| 클러스터형 인덱스는 고유해야합니까? (0) | 2020.10.17 |
| Git-메서드 / 함수의 변경 내역을 보려면 어떻게해야합니까? (0) | 2020.10.17 |