2009-12-29 5 views
11

문장 사이에 추가 간격을 표시하는 가장 좋은 방법은 무엇입니까 ([X] HTML + CSS 사용)?문장 간격

<p>Lorem ipsum. Dolor sit amet.</p> 
       ^^ wider than word spacing 

은 HTML과 모두 공백 폴딩을 필요로 XML 때문에, 위의 두 공간은 하나의 공간으로 행동해야합니다.

어떤 옵션이 있습니까? & thinsp; 아래에 몇 가지 명백한 것들이 있습니다. 다른 것들은 존재합니까? & thinsp; (CSS3의 모든 것?) & thinsp; 서로 다른 브라우저를 포함하여 이러한 단점이 있다면 어떤 단점이 있습니까? (어떻게 비 분리 공간 아래에 줄 바꿈과 상호 작용합니까?)이 주장 그물에 FUD의 많은

  • ..ipsum. &nbsp;Dolor..
  • ..ipsum.&nbsp; Dolor..
  • ..ipsum.&nbsp;&nbsp;Dolor..

있다 타자기에 대해 발명되었지만 US Declaration of Independence과 같은 문서에서 볼 수 있습니다. & thinsp; (그리고 네, 200 년 전부터 모든 관습을 따라야한다고 생각합니다. DoI는 타자기와 모노 스페이스 폰트를 보여주는 유용한 예일뿐입니다.) & thinsp; 또는 배경색을 변경 한 후 additional space is distracting —을 입력 한 타이포 그래퍼는 다른 어떤 것도 될 수 없으므로!

추가 간격을 사용할지 여부 (프로그래밍과 관련 없음)에 대한 의견 및 토론에 감사 드리며, 이는 내가 묻는 내용이 아닙니다. 이것이 요구 사항이라고 가정합니다. 구현하는 가장 좋은 방법은 무엇입니까?

+0

네, 전 세계의 다른 지역에 다른 규칙이 있습니다. 나는 이것을 명시한 규칙을 따르고 있음을 암시한다고 생각했습니다. :) (단점은 HTML로 인해 분명히 트레이드 오프를해야한다는 것입니다.) –

+0

모노 스페이스 글꼴과 벙어리 출력 장치를 사용했을 때이 전체 "2 개의 넌센스 이후 공간"이 발명되었습니다. 현대 타이포그래피 엔진이이 작업을 수행합니다. 기본 동작을 무시하지 * 않습니다. –

+2

프랭크 : 독립 선언문은 타이프되지 않았지만 이것을 사용합니다. 불행하게도 저는 TeX와 같은 현대 타이포그래피 엔진을 사용할 수 없습니다. HTML을 사용해야합니다. –

답변

3

각 문장을 한 문장으로 감싸고 아마 그 문장의 길이를 지정하십시오. (좋은 해결책은 아닙니다.)

+0

나는 이것을 생각해 내 "명백한 해결책"목록에 거의 넣었지만 버렸다. 그러나 현재 프리젠 테이션 단점을 최소화하면서 요구 사항을 충족하는 것은 유일하게 권장되는 솔루션입니다. (소스 코드 단점에도 불구하고.) 필자는 샘플에서 패딩을 사용했다. –

+0

나는 왜 그것이 downvoted, 당신은 코멘트를 남길 수있는 궁금 하군요? –

+0

그래,이 아이디어는 현재 마크 업을 많이 추가한다고해도 실제로는 가장 실용적인 해결책 일 수 있습니다. –

13

당신은 여전히 ​​텍스트를 포장하면서, 공간의 순서를 유지하기 위해 white-space: pre-wrap를 사용할 수 있습니다

<p style="white-space: pre-wrap;">Lorem ipsum. Dolor sit amet.</p> 

이것은 IE 8 모드에서 IE 8까지 IE에서 지원되지 않으며 3.0까지 파이어 폭스에서되지 않습니다.

또한 공간 하나 em 또는 1 en 전체에 대한 &emsp; 또는 &ensp;를 사용할 수 있습니다. 나는 이것들이 얼마나 광범위하게 지원되는지는 모르지만 Mac OS X의 최신 WebKit과 Firefox에서 작동하는 것으로 보입니다.

두 개의 &nbsp; 문자 시퀀스는 해당 공간에서 줄 바꿈을 방지합니다. 그것은 &nbsp;이 의미하는 것입니다. 시퀀스 A sentence. &nbsp;Another.을 사용하면 두 번째 줄에 &nbsp;이 나타나며, 텍스트를 약간 들여 쓰는 것이 바람직하지 않을 수 있습니다. 시퀀스 A sentence.&nbsp; Another.은 줄 바꿈과 함께 여분의 들여 쓰기를 추가하지 않아도 제대로 작동하지만 줄 바꿈 부분에 &nbsp;이있는 양쪽 맞춤 텍스트에 사용하면 해당 줄이 올바르게 정렬되지 않습니다. &nbsp;은 누군가의 이름을 쓰는 경우를 말합니다. 예를 들어 Mr.&nbsp;Torvalds 또는 약어가 .으로 끝나야합니다.이 규칙에서 사람들은 혼동을 피하고 문장이 끝났다고 생각하지 않기 위해 줄을 가로 지르지 않아야한다고 말합니다.

그래서 &nbsp;의 시퀀스를 사용하는 것은 바람직하지 않습니다. 이것은 문체 효과이므로 white-space: pre-wrap을 사용하는 것이 좋으며 스타일을 지원하지 않는 플랫폼에서는 스타일이 조금 이상적이지 않다고 받아 들여야합니다.

편집 : 의견에서 지적한대로 은 text-align: justify과 작동하지 않습니다. 그러나 BrowserShots (불쾌한 광고, 다소 색다른 느린 광고)을 사용하여 sampler of different entities을 테스트했지만 무료로 제공되는 매우 유용한 서비스입니다. 꽤 다양한 브라우저에서 매우 다양한 플랫폼을 지원하며, &ensp;&emsp;을 지원합니다. 일부는 여전히 공백을 사용하지 않으므로 렌더링이 나쁘지 않으며 Windows 2000의 IE 6 만 실제로 렌더링됩니다 상자처럼 부서졌다. BrowserShots는 제가 원하는 정확한 브라우저/OS 콤보를 선택할 수 없기 때문에 XP에서 IE 6을 선택할 수 없기 때문에 다른 점이 있는지 확인하십시오. 그래서, Win2K (그리고 어쩌면 XP)에서 Internet Explorer 6를 사용할 수있는 한 그럴듯한 대답입니다.

또 다른 가능한 해결책은 "."문자 조합에 대한 커닝 쌍이있는 글꼴을 찾아서 (또는 만들어서) 더 넓게 벌릴 수 있습니다. 이 시점에서 모든 주요 브라우저에서 @font-face을 지원합니다. IE 5.5 (IE는 다른 브라우저와 다른 형식을 사용하지만)를 포함하여 자신의 글꼴을 사용하는 것이 실제로 합리적이되어 사용자의 기본 글꼴로 다시 떨어지는 경우 if 지원되지 않으면 아무 것도 깨뜨리지 않습니다.

마지막으로 CSS위원회에서 문장 끝에 공백이 더 많이 오도록 지정할 수있는 스타일 기능을 추가하는 방법이 있습니다 (마침표 다음에 공백이오고 약어와 약자는 넓은 공간을 피하기 위해 &nbsp;이 필요합니다. CSS위원회는 현재 고급 타이포그래피 지원 추가에 대해 논의하고 있으므로 이제는 그러한 기능을 논의하기에 좋은시기가 될 것입니다.

+0

이렇게하면'text-align : justify'가 비활성화됩니다. 그렇지 않으면 최상의 답이 될 것 같습니다. –

+1

흠. 정확한 간격을 원할 경우 왜 '정당화'를 사용합니까? 그런 경우, 다양한 브라우저에서 ' '을 테스트하고, 이것이 작동하는지 확인하십시오. –

+0

나는 다른 이유로 정당화 된 텍스트를 사용하지만 문장 간격은 단어 간격보다 넓어야합니다. –

2

&nbsp;은 의미 상으로는 올바른 문자가 아닙니다. 그것은 비 분리 공간 : 줄 바꿈으로 사용되지 않는 공간입니다. 아마도 &ensp; 또는 &emsp;이라는 단일 공백을 사용하거나 (내 개인적인 권장 사항) 페이지의 오래된 이중 공백 스타일을 귀찮게하지 마십시오.

3

"적절한"문장 간격을 제공하기 위해 기본 브라우저 공백 구현을 무시하는 것이 목표라면 적절한 간격을 구성하는 내용은 실제로 some debate입니다. 이중 공간 "표준"은 타자기에서 모노 스페이스 글꼴을 사용했을 때의 이월 가능성이 가장 높습니다. 돈 인용 :

최하위 : 전문 조판, 디자이너, 바탕 화면 발행인이 하나 개의 공간 만 사용해야합니다. 타이핑, 이메일, 학기 논문 ( 사용하는 스타일 가이드로 으로 규정 된 경우) 또는 개인 통신을위한 이중 공간을 확보하십시오. 그 밖의 모든 사람들은 을 기분 좋게 만듭니다.

엄격한 요구 사항이 없다면 "시도"할 필요가 없습니다. (나는 이것이 당신이 진술 한 질문에 대한 답이 아니라는 것을 알고 있지만, 많은 시간을 소비하기로 한 결정에 영향을 미치기 때문에이 정보를 알고 싶었습니다.)

+0

흥미롭게도 링크 된 페이지 (현재 14584 표)의 설문 조사는 추가 문장 간격에 찬성하여 47 %이며 추가 8 %는 매일 추가 간격으로 사용하거나 작업합니다 (세 번째 옵션). –

+0

개인적으로 나는 IM에서 또는 내 iPhone에서 입력 할 때 키 조합을 저장하기 위해 단일 공간으로 변경했습니다 (다른 미디어에서 2를 계속 사용하는 이유는 모르겠지만). ...) 나는 그것이 정정의 문제보다 더 요즘의 문체적인 것으로 생각한다. 전문 편집인이 그것에 대해 뭐라고하는지 궁금 할 것입니다. –

+0

내가 읽은 여러 출처는 WW2 이후에 잡지와 출판인 같은 회사가 종이와 비용을 절약하기 위해 많은 이전 관행을 조정했다는 데 동의합니다. 그러한 관행은 오늘날의 선례가되었다. 그 정당성은 나에게 적용되지 않습니다. (분명히 그렇게하지는 않습니다. 인쇄 레이아웃을 위해 HTML을 사용하는 것이 가능합니다.)하지만 청중은 어쨌든 그것과 다릅니다. –

1

& nbsp; 그것은 칭의를 방해하기 때문에 가능한 최악의 방법입니다. 제안 된대로 사전 감싸는 것은 거친 통제를하지만 정당화 될 수는 없습니다.& thinspace와 같은 다른 공간 엔티티가 있습니다. & nspace;뿐만 아니라 더 나은 제어를 제공하고 칭의를 깨뜨리지 않아야하는 유니 코드 공간 문자가 많이 있습니다. 이 엔티티는 제 생각에는 최고의 비 CSS 솔루션입니다.

더 나은 제어를 위해 CSS 솔루션이 필요합니다. 문장을 확장하거나 분명한 선택을하거나 문장 사이에 공백을 둘 수 있습니다. 후자는 더 부정확하게 보일 수 있지만 일반적으로 두 개의 공백을 입력하는 습관이있는 경우 특히 더 쉽게 달성 할 수 있습니다. 모든 기간 공간을 공백 주위의 스팬으로 간단히 검색하고 바꿀 수 있습니다. 블로거를 위해이 작업을 수행하는 자바 스크립트가 있습니다.

완벽하게 정렬 된 텍스트의 오른쪽 여백이 깨지기 때문에 상자 모델 (패딩 오른쪽)을 사용하면 안됩니다 (심지어 완전히 정당화되지 않아도 줄이 "일찍 감겨 있음"). 문장 사이의 간격에 걸쳐 있다면이 요소들의 단어 간격을 바꿀 수 있습니다. 문장을 줄 바꿈하는 경우 단락이나 다른 컨테이너를 더 큰 단어 간격으로 설정하고 문장을 보통으로 설정하거나 다음 선택자를 사용하여 한 단계로 수행 할 수 있습니다.

.your_sentence_class : after {content : ""; 단어 간격 : 0.5em; }

3

'골동품 전용'및 '모노 스페이스 전용'으로 말하면 - 책을 읽으십시오.   전문 게시자는 시대에 뒤떨어 진 문장 사이에 &emsp;이라는 단일 문자를 사용했으며, 그 대신에 모노 스페이스 2 공간 표준이 나온 곳이 있습니다.   사실상 근거가없는 수사학을 내뿜기보다는 역사에서 배우십시오.   그래도 &ensp;이 대부분의 브라우저에서 더 잘 어울린다는 것을 인정해야합니다. &emsp;이 너무 넓습니다.  이 단락의 가독성에 대해 어떻게 생각합니까?   Stackoverflow의 편집기에서 일부 HTML을 허용하고 모든 문장 사이에 &ensp;을 사용하고 있습니다.

+0

이것은 대답보다 훨씬 더 비평처럼 보입니다. – Syon

+1

@Syon, 수다쟁이지만 질문에 대답하는 것 같습니다 : " "을 사용하거나, 좋다고 생각되면 '  "" –

+0

http://www.heracliteanriver.com/?p=324 - 여기에 em-quadrat (이중 공간)가 수세기 동안 1930 년대까지 사용되었다고 기록되어있는 잘 연구 된 기사와 계약한다. 그 쯤. –