p5.js에서는 일본어가 자동 개행되지 않음

Processing에서는 text()에 범위 지정하는 것으로 캐릭터 라인을 자동 개행해 줍니다. p5.js에도 범위 지정의 기능이 있습니다만, 일본어로는 현재 개행할 수 없습니다.

여기에서는 행의 문자수를 설정해 개행하는 방법을 해 보겠습니다.

영어 문자열의 경우

p5.js

let txt = "Hello! p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web."

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(200);
  text(txt,0,0,width,height);
}

위의 txt와 같은 긴 문자열에 대해

text(txt,0,0,width,height);

와 같이 텍스트 박스의 범위를 지정하면, 캐릭터 라인이 자동적으로 개행된다.

일본어 문자열의 경우

p5.js

let txt = "こんにちは！p5.jsは、アーティスト、デザイナー、教育者、初心者がコーディングにアクセスできるようにすることを目的としたProcessingの本来の目的から始まるJavaScriptライブラリです。これを今日のWeb用に再解釈します。"

function setup() {
  createCanvas(200, 200);
}

function draw() {
  background(200);
  text(txt,0,0,width,height);
}

이렇게 일본어 문자열이라면 개행되지 않는다. 일본어라도 좋은 곳에 반각 스페이스를 넣으면 개행되기 때문에, 반각 스페이스가 개행의 기준이 되고 있는 것 같다.

문자 수를 지정하고 줄 바꿈

코드

p5.js

let txt = "こんにちは！p5.jsは、アーティスト、デザイナー、教育者、初心者がコーディングにアクセスできるようにすることを目的としたProcessingの本来の目的から始まるJavaScriptライブラリです。これを今日のWeb用に再解釈します。"

var str1, str2, sliceStr;
var addBreakStr = "";
var wCount = 10;

function setup() {
  createCanvas(200, 200);

  sliceStr = txt;
  for (var i = 0; i < txt.length / wCount; i++) {
    str1 = sliceStr.slice(0, wCount);
    str2 = sliceStr.slice(wCount);
    addBreakStr += str1 + '\n';
    sliceStr = str2;
  }
}

function draw() {
  background(200);
  text(addBreakStr, 0, 0, width, height);
}

결과

해설

원래의 캐릭터 라인에, 일정한 문자수로 개행을 더하도록(듯이) 합니다.

문자 분할

p5.js

var txt ="あいうえお"

txt.slice(2); //うえお
txt.slice(1,3) //いう

문자열 .slice로 문자열을 분할할 수 있다.
파라미터 하나로, 그 문자수 이후를 꺼냅니다(0은 1자째).
파라미터 2개로, 몇자째 이후, 몇자째까지를 꺼냅니다.

먼저 원래 문자열을 파괴하지 않도록 sliceStr, 분할 문자열을 넣는 str1, str2를 선언합니다.

p5.js

var str1, str2, sliceStr;

sliceStr에 원래 문자열을 할당합니다.

p5.js

sliceStr = txt;

여기에서는 개행하기까지의 문자수를 10자로 합니다.

p5.js

var wCount = 10;

str1에 처음 10자를, str2에 그 이후의 문자열을 분할하고 할당합니다.

p5.js

str1 = sliceStr.slice(0, wCount);
str2 = sliceStr.slice(wCount);

줄 바꿈 추가

문자열에 "\n"을 추가하여 줄 바꿈할 수 있습니다. 위에서 나눈 문자열을 "\n"으로 연결합니다.

빈 String 유형을 선언하고,

p5.js

var addBreakStr = "";

위에서 분할한 처음 10자(str1)와 "\n"을 추가합니다.

p5.js

addBreakStr += str1 + '\n';

반복하다

위의 작업을 for로 바꿉니다.

p5.js

for (var i = 0; i < txt.length / wCount; i++) {
    str1 = sliceStr.slice(0, wCount);
    str2 = sliceStr.slice(wCount);
    addBreakStr += str1 + '\n';
    sliceStr = str2;
}

for로 반복하는 횟수는, 몇행이 되는지의 수가 됩니다.
문자열 길이/줄 바꿈까지의 문자 수
에서 계산하여 몇 줄이 되는지를 산출하고 있습니다.

p5.js

txt.length / wCount

일본어만이라면 깨끗하게 개행됩니다만, 영어도 들어가면 보코보코가 됩니다.

보코 보코를 수정하기 위해, 영문자를 0.5 카운트로 해도 영 단어가 이상한 곳에서 개행될 우려가 있습니다. 무언가 방법이 있으면 가르쳐주세요.