안녕하세요
HTML 을 웹한글삽입시 SetTextFile 를 사용하고있는데
HTML에 공백을 " " 이게 여러개면 하나로처리되어 여러칸이면 한칸만 공백처리가 되어 보여집니다.
특수문자 nbsp 나 160 특수문자를 쓰면 여러개도 여러개 공백으로 나오지만
스페이스바여러개를 특수문자가아닌 그냥 공백을 SetTextFile 로 했을때
그대로 적용이가능할까요? 해당부분확인부탁드립니다.
안녕하세요.
SetTextFile을 통해 HTML을 삽입할 때 일반 스페이스(U+0020) 여러 개가 한 칸으로 보이는 현상은, HTML/CSS 표준의 공백 처리(white-space processing) 규칙에 따른 동작입니다.
조금 더 정확히 말씀드리면, HTML 파서는 입력된 공백을 그대로 DOM에 보존합니다.
다만 화면에 그리는 렌더링 단계에서 CSS의 white-space 속성 기본값(normal)에 따라 연속된 공백 문자(스페이스·탭·줄바꿈)가 하나의 스페이스로 축약됩니다. 즉 웹한글기안기 SetTextFile 구현과는 무관하며, HTML 표준 렌더링 규칙에서 비롯된 현상입니다.
따라서 일반 스페이스를 그대로 전달해 다중 공백으로 표시되게 하는 것은 지원되지 않으며,
아래 세 가지 방법 중 하나를 사용해 주시기 바랍니다.
- 또는 유니코드 U+00A0(NO-BREAK SPACE) 사용
질문에서 직접 언급하신 방법으로, 현재 가장 확실하게 동작합니다.
공백 여러 개를 표현할 때 스페이스 대신 를 사용하면 의도한 간격이 유지됩니다.
<p>앞쪽 뒤쪽</p>
다만 NBSP는 줄바꿈이 일어나지 않는 문자이므로,
긴 구간에 연속으로 사용하면 줄바꿈 위치가 의도와 다르게 잡힐 수 있는 점 참고 부탁드립니다.
- white-space: pre-wrap 스타일 적용
해당 요소 내부의 공백과 줄바꿈을 그대로 보존하면서, 자동 줄바꿈은 정상 동작합니다.
마크업 변경 없이 스타일만 지정하면 되므로 대부분의 경우 가장 무난한 방법입니다.
<p style="white-space: pre-wrap;">앞쪽 뒤쪽</p>
- <pre> 태그를 <div>로 감싸서 사용
포럼 기존 사례(HTML -> 한글 변환시 글자 크기와 문장 앞 공백 동시 적용 방법 문의)에서 확인된 방법입니다.
<pre> 태그를 단독으로 사용할 경우 CSS 스타일이 적용되지 않는 문제가 있으나,
외부를 <div>로 감싸고 해당 <div>에 CSS class를 적용하면 스타일 적용과 공백 보존이 함께 동작함이 확인되었습니다.
<div class="my-class">
<pre>
앞쪽 뒤쪽
</pre>
</div>
감사합니다.
2번방법을 웹한글에서 테스트시
한칸 두칸 세칸 네칸
html 브라우저 에서는 잘되지만 웹한글로
var htmlData = "<p style="white-space:pre-wrap;"> 한칸 두칸 세칸 네칸</p> ";
HwpCtrl.SetTextFile(htmlData, “HTML”, “insertfile”, function (result) {});
테스트시 공백처리가안되는것으로 보입니다. 2번은 웹한글에서 처리불가능한건지 확인부탁드립니다.
안녕하세요.
앞서 안내드린 방법 중 일부에 대해 정정 사항을 안내드립니다.
2번(white-space: pre-wrap) 방법은 SetTextFile 내부 HTML 파서에서 정상 동작하지 않는 점 정정합니다.
혼선을 드려 다시 한번 사과드립니다.
감사합니다.