2010-06-16 4 views
3

div에 텍스트가 있습니다. 중국어, 일본어 및 한국어를 포함하여 태양 아래서 유니 코드 텍스트 일 ​​수 있습니다. 자, 나는이 텍스트를 가져 와서 JavaScript로 효율적이고 정확한 방식으로 단어를 감쌀 필요가있다. 그럼 모든 라인의 시작 부분에 ">"를 삽입하고 결과 텍스트를 텍스트 영역에 넣어야합니다.자바 스크립트에서 브라우저의 단어 줄 바꿈을 사용할 수 있습니까?

브라우저에는 유니 코드 워드 랩 알고리즘이 구현되어 있으며 with CSS에서 유니 코드 텍스트를 워드 랩핑합니다. (적어도 파이어 폭스는 그러한 알고리즘을 가지고 있으며, 다른 브라우저도 마찬가지라고 생각합니다.) JavaScript가 동일한 단어 줄 바꿈 알고리즘을 사용하여 유니 코드 텍스트를 적절하게 포장 한 다음 "인용"할 수있는 방법이 필요합니다. .

JavaScript가 브라우저의 단어 줄 바꿈 알고리즘을 사용하거나 div 또는 다른 요소에서 텍스트가 줄 바꿈 된 부분을 알 수있는 방법이 있습니까?

+0

아주 좋고 흥미로운 질문입니다. Max, +1. 불행히도 div에서 임의의 텍스트의 단어 줄 바꿈을 찾는 직접적인 방법이 없다는 것을 알고 있습니다 (사용자가 선택한 상대 글꼴 크기에 따라 다름). 그러나 제안을 듣는 데 관심이 있습니다. –

답변

2

당신이 정말로 원하는 것은 모든 줄의 시작 부분에 흐르는 텍스트에 반드시 ">"을 삽입 할 필요는 없습니다. 당신이 정말로 원하는 것은 주어진 블록의 모든 라인이 그것의 왼쪽에 ">"를 갖는 것입니다. 당신이 사용에 대한 계획 CSS line-height 값 아래 해당 처음부터 높이 더불어 ">"문자의 이미지를 만들기)

1 :

당신은 잠재적으로 후자를 할 수 있습니다. 이 이미지를 "삽입 된"텍스트의 컨테이너에 배경으로 적용하십시오. 수직으로 되풀이하지만 수평으로 되풀이하지 마십시오. 컨테이너에 문자/이미지의 너비를 채 웁니다.

2) 작업중인 컨테이너에 대한 line-height 속성의 계산 된 값을 자바 스크립트로 가져 오십시오. 그런 다음이 컨테이너의 높이를 인위적으로 설정하지 않는다고 가정하면 컨테이너에있는 텍스트의 "줄"수는 offsetHeight을 계산 된 줄 높이로 나눈 값입니다. 이 시점에서 내용의 수만큼의> 수를 가진 별도의 컨테이너를 만듭니다. 콘텐츠 컨테이너의 왼쪽 가장자리에 배치하십시오.

브라우저가 JavaScript를 통해 사용하는 텍스트 흐름 알고리즘에 대한 액세스 권한이 있는지에 관한 더 큰 질문은 흥미로운 질문이지만, 대답은 '아니오'입니다. 그러나 더 많은 개발자가 Canvas 요소를 사용하여 게임을 시작하면 사람이 직접 작성합니다 (Canvas에는 텍스트 그리기가 있지만 텍스트의 자체 레이아웃 레이아웃 알고리즘은 없습니다). Bespin 녀석들이 무엇을했는지보고 싶을 수도 있습니다 (https://bespin.mozillalabs.com/ - 캔버스를 사용하여 구현 된 텍스트 편집기) 또는 jQSlickWrap (http://jwf.us/projects/jQSlickWrap/)과 같은 샌드백/이미지 텍스트 래핑 자바 스크립트 라이브러리의 소스를 확인하십시오.

+0

와우, 그건 꽤 똑똑해! 그러나 줄 높이는 사용중인 글꼴에 따라 다릅니다. 맞습니까? 그리고 사용중인 글꼴은 다른 플랫폼에있는 다른 브라우저에서 다른 라인 높이를 가질 수 있습니다. 따라서 사용자가 확대하거나 누군가가 사용중인 글꼴을 수정 한 경우 오류가 발생합니다 (가능한 경우 - 이는 배송 응용 프로그램이며 사내 응용 프로그램이 아닙니다). 그리고 FWIW, 텍스트에 명시적인 줄 바꿈을 추가하고 싶습니다. 그것은 그것에 \ n의와 함께 서버에 갈 필요가있다. –

+0

Approach # 2는 확대/축소 된 폰트 변경 사항을 처리 할 수 ​​있습니다. 계산 된 항목에 의존하기 때문에 가능하지만, # 1의 접근법은 매우 취약합니다. 명백한 줄 바꿈 ... 흠. 알다시피, 이것은 다시 할당 된