Flutter - Hangeul Word Break (단어 줄바꿈)

Routine·2024년 2월 28일
0

Flutter

목록 보기
7/7

Hangeul(한글) 줄바꿈

한글 텍스트를 입력하다 보면 자연스러운 줄바꿈이 되지 않는 현상이 있다.
지정된 범위 내에서 다음 텍스트를 렌더링 할 공간이 없으면 개행을 하게되고,
있을 경우 렌더링을 하게된다.

Before

Before 부분을 보면 텍스트가 렌더링 되는데 이때 끊기는 곳이 단어와 상관없이
다음 텍스트를 렌더링 할 공간이 없을 경우임을 알 수 있다.

After

After 부분을 보면 텍스트가 렌더링 될때 단어 단위로 들어가지 못할 공간일 경우
개행하여 텍스트를 렌더링 하게 되는것을 알 수 있다.

해당 Github issue 를 보면 많은 분들이 고민하여 나온 해결 방법이 아래와 같이 2개 있다.

replaceAllMapped(RegExp(r'(\S)(?=\S)'), (m) => '${m[1]}\u200D')
final RegExp emoji = RegExp(
        r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])');
String fullText = '';
List<String> words = text.split(' ');
for (var i = 0; i < words.length; i++) {
	fullText += emoji.hasMatch(words[i])
    	? words[i]
        : words[i]
        	.replaceAllMapped(RegExp(r'(\S)(?=\S)'), (m) => '${m[1]}\u200D');
	if (i < words.length - 1) fullText += ' ';
}

0개의 댓글