웹 브라우저에서도 세로 쓰기의 아름다운 일본어 입력을.

세 줄 요약

구현 방법

contenteditable

<div contenteditable="true">
  <p>編集が可能な要素</p>
  <p contenteditable="false">編集が不可能な要素</p>
</div>

writing-mode

.vertical-text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;}

구현(기타)

• 텍스트 스타일
  
  
  • 다음과 같이 지정했습니다.
  
  

.vertical-text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 20px;
  font-family: "Noto Serif JP", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  color: #2c3e50;
  line-height: 2em;
  text-indent: 1em;
}

• 폰트
  
  
  • 이번에는 Google Fonts의 Noto Serif KR에 신세를 졌습니다.
  
  
• 입력 형식
  
  
  • 모처럼 contenteditable 를 이용해 구현했다는 배경도 있어, 표제나 리스트도 출력하기 위해, Markdown에의 대응을 실시했습니다.
  • 이번은 리치 텍스트 라이브러리 「 ProseMirror 」의 Vue.js용 래퍼 「 tiptap 」에 신세를 졌습니다.
  
  

이 단계를 거쳐 이번 세로 쓰기 편집기의 프로토 타입이 완성되었습니다.

아티팩트

htps : // 0. 기주 b. 이오 ※Chrome 추천입니다.

결론

"세로 쓰기"및 "일본어"및 "Web"의 입력 방식은 매우 틈새이지만 따라서 선행 사례가 매우 적습니다만, 구현해 보면 몇 줄 정도의 기술로 간단하게 실현 할 수 있어요. 한편으로 커서 키로의 조작이 곤란한 일이나, 브라우저에서는 세세한 문자조 대응이 어려운 것이 과제로서 들 수 있습니다. 앞으로도 계속 조사나 개량을 진행하면서, 세로 쓰기 입력을 일상적으로 사용할 수 있도록 활용 방법이나 보다 좋은 실장 패턴을 찾아내면 좋겠습니다.

참고 링크

• contenteditorble - MDN
• writing-mode - MDN
• tiptap