1.1.9

Author: ivLis-Studio

Pages.js

@@ -361,28 +361,30 @@ const KaraokeLine = react.memo(({ line, position, isActive, globalCharOffset = 0
 	let lastIndex = 0;
 	let match;
 
-	while ((match = whitespacePattern.exec(rawLineText)) !== null) {
+	// Build text from charRenderData to ensure exact matching
+	const actualText = charRenderData.map(c => c.char).join('');
+
+	// Reset regex state
+	whitespacePattern.lastIndex = 0;
+	while ((match = whitespacePattern.exec(actualText)) !== null) {
 		if (match.index > lastIndex) {
-			tokens.push({ type: "word", value: rawLineText.slice(lastIndex, match.index) });
+			tokens.push({ type: "word", value: actualText.slice(lastIndex, match.index) });
 		}
 		tokens.push({ type: "space", value: match[0] });
 		lastIndex = match.index + match[0].length;
 	}
 
-	if (lastIndex < rawLineText.length) {
-		tokens.push({ type: "word", value: rawLineText.slice(lastIndex) });
+	if (lastIndex < actualText.length) {
+		tokens.push({ type: "word", value: actualText.slice(lastIndex) });
 	}
 
 	const hasWhitespaceToken = tokens.some(token => token.type === "space");
-	// Count only actual characters from charRenderData (no spaces)
+	// Total character count including spaces
+	const totalTokenChars = tokens.reduce((sum, token) => sum + Array.from(token.value).length, 0);
 	const actualCharCount = charRenderData.length;
-	// Count characters in word tokens (excluding space tokens)
-	const wordTokenChars = tokens
-		.filter(token => token.type === "word")
-		.reduce((sum, token) => sum + Array.from(token.value).length, 0);
 
-	// Word grouping only works if syllable text matches token words exactly
-	let useWordGrouping = hasWhitespaceToken && wordTokenChars === actualCharCount;
+	// Word grouping works if we have spaces and total chars match
+	let useWordGrouping = hasWhitespaceToken && totalTokenChars === actualCharCount;
 
 	if (useWordGrouping) {
 		let charCursor = 0;
@@ -427,16 +429,39 @@ const KaraokeLine = react.memo(({ line, position, isActive, globalCharOffset = 0
 
 				charCursor += wordChars.length;
 			} else {
+				// Space token - render the space characters from charRenderData
+				const spaceChars = Array.from(token.value);
+				const spaceCharData = charRenderData.slice(charCursor, charCursor + spaceChars.length);
+
+				if (spaceCharData.length !== spaceChars.length) {
+					mappingFailed = true;
+					return;
+				}
+
+				const spaceChildren = spaceCharData.map(charData =>
+					react.createElement(
+						"span",
+						{
+							key: charData.key,
+							className: charData.className,
+							style: charData.style
+						},
+						charData.char
+					)
+				);
+
 				elements.push(
 					react.createElement(
 						"span",
 						{
 							key: `space-${tokenIndex}`,
 							className: "lyrics-karaoke-word-space"
 						},
-						token.value
+						spaceChildren
 					)
 				);
+
+				charCursor += spaceChars.length;
 			}
 		});
 
@@ -517,18 +542,16 @@ const KaraokeLine = react.memo(({ line, position, isActive, globalCharOffset = 0
 				);
 			}
 
+			// Only add syllable boundary space if the next character is actually a space
 			const nextCharData = charRenderData[index + 1];
 			if (nextCharData && nextCharData.syllableIndex !== charData.syllableIndex) {
-				elements.push(
-					react.createElement(
-						"span",
-						{
-							key: `space-${charData.key}`,
-							className: "lyrics-karaoke-space"
-						},
-						" "
-					)
-				);
+				// Check if the next character is a whitespace character
+				if (nextCharData.char && /\s/.test(nextCharData.char)) {
+					// Skip - the space will be rendered as part of charRenderData
+				} else {
+					// No space in the actual text, don't add artificial space
+					// This prevents "woul d" style splitting
+				}
 			}
 		});
 	}

Utils.js

@@ -581,7 +581,7 @@ const Utils = {
 	/**
 	 * Current version of the lyrics-plus app
 	 */
-	currentVersion: "1.1.8",
+	currentVersion: "1.1.9",
 
 	/**
 	 * Check for updates from remote repository

style.css

@@ -276,7 +276,7 @@
 	text-shadow: var(--lyrics-text-shadow);
 	opacity: var(--lyrics-original-opacity, 1);
 	overflow-wrap: break-word;
-	word-break: keep-all;
+	word-break: auto-phrase; /* Allow natural breaks in CJK and word boundaries in Latin */
 	margin-bottom: 12px;
 }
 
@@ -288,7 +288,7 @@
 	text-shadow: var(--lyrics-text-shadow);
 	opacity: var(--lyrics-original-opacity, 1);
 	overflow-wrap: break-word;
-	word-break: keep-all;  
+	word-break: auto-phrase; /* Allow natural breaks in CJK and word boundaries in Latin */
 }
 
 @media (min-width: 1280px) {
@@ -433,33 +433,43 @@ div.lyrics-tabBar-headerItemLink {
 
 /* 새로운 가라오케 스타일 - synced 모드 기반 */
 .lyrics-karaoke-line {
-	display: inline;
-	letter-spacing: -0.06em; /* 글자 간격 더 좁게 */
+	display: block; /* inline에서 block으로 변경하여 정상적인 줄바꿈 허용 */
+	letter-spacing: -0.045em; /* 글자 간격 조정 (-0.06em에서 -0.02em으로 변경) */
+	line-height: 1.3; /* 줄바꿈 시 줄간격 조정 */
 }
 
 .lyrics-karaoke-word {
+	/* Make word a block that wraps as a unit, but can break if too long */
 	display: inline-block;
-	white-space: nowrap;
+	white-space: nowrap; /* keep word together */
+	/* If word is too long for the line, allow breaking inside */
+	max-width: 100%;
+	overflow-wrap: break-word;
+	word-break: normal;
+	line-height: inherit;
+	vertical-align: baseline;
 }
 
 .lyrics-karaoke-word-space {
 	display: inline;
 	white-space: pre-wrap;
 	letter-spacing: 0;
-	min-width: 0.3em;
+	min-width: 0.5em; /* 띄어쓰기 간격 증가 (0.3em -> 0.5em) */
 }
 
 .lyrics-karaoke-char {
-	display: inline-block;
+	display: inline-block; /* transform 적용을 위해 inline-block 유지 */
 	position: relative;
 	color: var(--lyrics-color-inactive);
-	/* synced 모드보다 더 좁은 letter-spacing 적용 */
-	letter-spacing: -0.06em;
+	/* 글자 간격을 살짝 더 넓게 조정 */
+	letter-spacing: -0.045em; /* -0.06em에서 -0.02em으로 변경 */
 	/* 부드러운 transition은 inline style에서 처리 */
 	/* GPU 가속 활성화 */
 	will-change: transform, color;
 	backface-visibility: hidden;
 	-webkit-font-smoothing: antialiased;
+	/* 세로 정렬로 줄바꿈 시 정렬 개선 */
+	vertical-align: baseline;
 }
 
 /* Karaoke mode: ruby inside karaoke-char */

version.txt

@@ -1 +1 @@
-1.1.8
+1.1.9