Add New Option: endpointCorrection

src/i18n/en/index.ts

@@ -6,6 +6,7 @@ const en: BaseTranslation = {
 		verticalGap: 'Vertical Gap',
 		lineGap: 'Line Gap',
 		straightLength: 'Straight Part',
+		endpointCorrection: 'Endpoint Correction',
 		textAlignment: 'Text Alignment',
 		displayLanguage: 'Display Language',
 		text: 'Text',

src/i18n/fr/index.ts

@@ -6,6 +6,7 @@ const fr: Translation = {
 		verticalGap: 'Espace vertical',
 		lineGap: 'Espace des lignes',
 		straightLength: 'La part droite',
+		endpointCorrection: 'Correction du point final',
 		textAlignment: 'Alignement du texte',
 		displayLanguage: 'Langue d’affichage',
 		text: 'Texte',

src/i18n/i18n-types.ts

@@ -35,6 +35,10 @@ type RootTranslation = {
 		 * S​t​r​a​i​g​h​t​ ​P​a​r​t
 		 */
 		straightLength: string
+		/**
+		 * Endpoint Correction
+		 */
+		endpointCorrection: string
 		/**
 		 * T​e​x​t​ ​A​l​i​g​n​m​e​n​t
 		 */
@@ -189,6 +193,10 @@ export type TranslationFunctions = {
 		 * Straight Part
 		 */
 		straightLength: () => LocalizedString
+		/**
+		 * Endpoint Correction
+		 */
+		endpointCorrection: () => LocalizedString
 		/**
 		 * Text Alignment
 		 */

src/i18n/ja/index.ts

@@ -6,6 +6,7 @@ const ja: Translation = {
 		verticalGap: '行間隔',
 		lineGap: '直線隙間',
 		straightLength: '直線部分',
+		endpointCorrection: '終点補正',
 		textAlignment: 'テキスト配置',
 		displayLanguage: '表示言語',
 		text: 'テキスト',

src/i18n/ko/index.ts

@@ -6,6 +6,7 @@ const ko: Translation = {
 		verticalGap: '줄 간격',
 		lineGap: '직선 틈',
 		straightLength: '직선 길이',
+		endpointCorrection: '종점 보정',
 		textAlignment: '문자 정렬',
 		displayLanguage: '표시 언어',
 		text: '문자',

src/i18n/zh-HanS/index.ts

@@ -6,6 +6,7 @@ const zh: Translation = {
 		verticalGap: '行距',
 		lineGap: '线距',
 		straightLength: '直线长度',
+		endpointCorrection: '端点校正',
 		textAlignment: '文本对齐方式',
 		displayLanguage: '显示语言',
 		text: '文本',

src/i18n/zh-HanT/index.ts

@@ -6,6 +6,7 @@ const zh: Translation = {
 		verticalGap: '行距',
 		lineGap: '線距',
 		straightLength: '直線長度',
+		endpointCorrection: '端點校正',
 		textAlignment: '文字對齊方式',
 		displayLanguage: '顯示語言',
 		text: '文字',

src/lib/Output.svelte

@@ -46,6 +46,7 @@
 	export let verticalGap: number;
 	export let lineGap: number;
 	export let straightLength: number;
+	export let endpointCorrection: number;
 	export let alignment: Alignment = 'center';
 	export let fontFamily: FontFamily;
 	export let fontStyle: FontStyle;
@@ -60,19 +61,20 @@
 		mounted = true;
 	});
 
-	$: if (mounted && equivalency && !loading) lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength);
+	$: if (mounted && equivalency && !loading) lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength, endpointCorrection);
 
 	$: if (!loading && alignment && fontFamily && fontStyle && fontSize !== undefined && $locale)
 		tick().then(() => {
-			lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength);
+			lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength, endpointCorrection);
 		});
 
 	function drawLines(
 		word_spans: HTMLSpanElement[][],
 		equivalency: number[][][],
 		verticalGap: number,
 		lineGap: number,
-		straightLength: number
+		straightLength: number,
+		endpointCorrection: number
 	): Line[] {
 		const rectOutput = output.getBoundingClientRect();
 
@@ -103,10 +105,17 @@
 					const rectB1 = spanB1.getBoundingClientRect();
 					const rectB2 = spanB2.getBoundingClientRect();
 
-					const x1 = (rectA1.left + rectA2.right) / 2 - rectOutput.left;
-					const y1 = rectA1.bottom - rectOutput.top + lineGap;
-					const x2 = (rectB1.left + rectB2.right) / 2 - rectOutput.left;
-					const y2 = rectB1.top - rectOutput.top - lineGap;
+					let x1 = (rectA1.left + rectA2.right) / 2 - rectOutput.left;
+					let y1 = Math.max(rectA1.bottom, rectA2.bottom) - rectOutput.top;
+					let x2 = (rectB1.left + rectB2.right) / 2 - rectOutput.left;
+					let y2 = Math.min(rectB1.top, rectB2.top) - rectOutput.top;
+
+					const correction = endpointCorrection / ((y2 - y1) / (x2 - x1));
+					x1 += correction;
+					y1 += lineGap;
+					x2 -= correction;
+					y2 -= lineGap;
+
 					const color = colors[i];
 					lines.push([x1, y1 + straightLength, x2, y2 - straightLength, color]);
 
@@ -182,7 +191,7 @@
 <svelte:window
 	on:resize={async () => {
 		await tick();
-		lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength);
+		lines = drawLines(word_spans, equivalency, verticalGap, lineGap, straightLength, endpointCorrection);
 	}}
 	on:pointermove={onpointermove}
 	on:pointerup={dragend}

src/lib/Parameters.svelte

@@ -9,10 +9,15 @@
 	export let verticalGap = 30;
 	export let lineGap = 5;
 	export let straightLength = 0;
+	export let endpointCorrection = 0;
 	export let alignment: Alignment = 'center';
 	export let fontFamily: FontFamily = 'default';
 	export let fontStyle: FontStyle = 'normal';
 	export let fontSize = 15;
+
+	$: lineGap = Math.min(lineGap, verticalGap / 2);
+	$: straightLength = Math.min(straightLength, verticalGap / 2);
+	$: endpointCorrection = lineGap <= 0 || straightLength > 0 ? 0 : Math.min(endpointCorrection, lineGap);
 </script>
 
 <fieldset>
@@ -40,6 +45,20 @@
 	</label>
 	<RangeSlider id="straight-length" min={0} max={verticalGap / 2} bind:value={straightLength} suffix=" px" />
 
+	<label for="endpoint-correction">
+		<iconify-icon icon="lets-icons:line" inline="true" />
+		{$LL.params.endpointCorrection()}
+	</label>
+	<RangeSlider
+		id="endpoint-correction"
+		min={0}
+		max={lineGap}
+		step={0.1}
+		bind:value={endpointCorrection}
+		suffix=" px"
+		disabled={lineGap <= 0 || straightLength > 0}
+	/>
+
 	<label for="locale">
 		<iconify-icon icon="mdi:earth" inline="true" />
 		{$LL.params.displayLanguage()}

src/routes/+page.svelte

@@ -55,6 +55,7 @@
 	let verticalGap: number;
 	let lineGap: number;
 	let straightLength: number;
+	let endpointCorrection: number;
 	let alignment: Alignment;
 	let fontFamily: FontFamily;
 	let fontStyle: FontStyle;
@@ -266,6 +267,7 @@
 				{verticalGap}
 				{lineGap}
 				{straightLength}
+				{endpointCorrection}
 				{fontFamily}
 				{fontStyle}
 				{fontSize}
@@ -312,7 +314,16 @@
 	</div>
 
 	<div class="params">
-		<Parameters bind:verticalGap bind:lineGap bind:straightLength bind:alignment bind:fontFamily bind:fontStyle bind:fontSize />
+		<Parameters
+			bind:verticalGap
+			bind:lineGap
+			bind:straightLength
+			bind:endpointCorrection
+			bind:alignment
+			bind:fontFamily
+			bind:fontStyle
+			bind:fontSize
+		/>
 	</div>
 
 	<div class="equivalency">