feat: Use thin and non-breaking thin spaces around em-dashes

sapegin · sapegin · commit 8da4f84b1299 · 2024-06-28T09:22:36.000+02:00
Apparently, we were already using non-breaking thin spaces which was disallowing line breaks not just the em-dash but also after, which is undesirable, but also it means that &lt;nobr&gt;s weren't needed for a long time and could have been safely removed.

This change keeps non-breaking thin spaces in front of em-dashes, but adding regular thin spaces after to allow line breaks after em-dashes.

It also updates the docs and code to never mention hair spaces, since we weren't using them.
diff --git a/packages/richtypo-rules-common/Readme.md b/packages/richtypo-rules-common/Readme.md
@@ -18,7 +18,8 @@ export const numberSigns = text =>
 | Definition name | Description |
 | --- | --- |
 | **`dash`** | hyphen (-) or em dash (—) |
-| **`hairspace`** | narrow non-breaking space (`\u202f`). |
+| **`thinspace`** | thin space (`\u2009`). |
+| **`nbthinspace`** | thin non-breaking space (`\u202f`). |
 | **`letter`** | any European or Cyrillic letter |
 | **`letterOrQuote`** | any European or Cyrillic letter with quotes |
 | **`nbsp`** | non-breaking space |
@@ -44,14 +45,15 @@ import { abbrs } from 'richtypo-common-rules';
 | --- | --- | --- | --- |
 | **`abbrs`** | wrap abbreviations in `<abbr>` tags | `ONU` | `<abbr>ONU</abbr>` |
 | **`amps`** | wrap an ampersand (&) in `<span class="amp">` tags | `Cie & Sons` | `Cie <span class="amp">&</span> Sons` |
-| **`dashes`** | replace the hyphen character with a em dash and add non-breaking spaces when it makes sense. | `- Hello` | `—&nbsp;Hello`² |
-| **`degreeSigns`** | add a hair space between numbers and degree symbol | `34 ° or 34°` | `34&#x202f;°` |
+| **`dashesBasic`** | replace `-` and `--` with an em-dashes | `dog -- friend` | `dog — friend`¹ |
+| **`dashesAdvanced`** | add a non-breaking thin space before an em dash, and a thin space after | `dog - friend` | `dog&#x202f;—&#x2009;friend`¹ |
+| **`degreeSigns`** | add a non-breaking thin space between numbers and degree symbol | `34 ° or 34°` | `34&#x202f;°` |
 | **`ellipses`** | replace three consecutive dots with an ellipsis | `oh...` | `oh…` |
-| **`numberUnits`** | insert non-breaking space between numbers and the following word | `100 km` | `100&nbsp;km`² |
-| **`orphans`** | add a non-breaking space to avoid orphans | `We go to the mall` | `We go to the&nbsp;mall`² |
-| **`shortWords`** | add a non-breaking space after short words | `We go to the mall` | `We&nbsp;go&nbsp;to&nbsp;the mall`² |
+| **`numberUnits`** | insert non-breaking space between numbers and the following word | `100 km` | `100&nbsp;km`¹ |
+| **`orphans`** | add a non-breaking space to avoid orphans | `We go to the mall` | `We go to the&nbsp;mall`¹ |
+| **`shortWords`** | add a non-breaking space after short words | `We go to the mall` | `We&nbsp;go&nbsp;to&nbsp;the mall`¹ |
 
-_² `&nbsp;` is actually rendered as a symbol (`\xA0`), not an HTML entity. We use `&nbsp;` only in the docs for readability._
+_¹ `&nbsp;` is actually rendered as a symbol (`\xA0`), not an HTML entity. We use `&nbsp;` only in the docs for readability._
 
 ### Rule factories
 
diff --git a/packages/richtypo-rules-common/src/common.ts b/packages/richtypo-rules-common/src/common.ts
@@ -1,7 +1,7 @@
 const nbsp = '\xA0';
-const hairspace = '\u202f'; // Narrow no-break space
-const space = `[ \t${nbsp}${hairspace}]`;
-const wordJoiner = '\u2060'; // Prevents line break
+const thinspace = '\u2009'; // Thin space
+const nbthinspace = '\u202f'; // Thin no-break space
+const space = `[ \t${nbsp}${nbthinspace}]`;
 const tag = '(?:<[^<>]*>)';
 const quote = '["“”«»‘’]';
 const letter = '[a-zà-ž0-9а-яё]';
@@ -20,9 +20,9 @@ const notInTag = `(?<!<[^>]*)`;
 
 export const definitions = {
 	nbsp,
-	hairspace,
+	thinspace,
+	nbthinspace,
 	space,
-	wordJoiner,
 	tag,
 	quote,
 	letter,
@@ -66,7 +66,7 @@ export const numberUnits = (text: string) =>
 export const degreeSigns = (text: string) =>
 	text.replace(
 		new RegExp(`${notInTag}(\\d${tag}?)${space}?[˚°]`, 'gmi'),
-		`$1${hairspace}°`
+		`$1${nbthinspace}°`
 	);
 
 export const ellipses = (text: string) =>
diff --git a/packages/richtypo-rules-en/Readme.md b/packages/richtypo-rules-en/Readme.md
@@ -10,12 +10,12 @@ sunny morning...
 to this:
 
 ```html
-The quick brown FOX&#x202f;&#x2060;—&#x202f;weighting
-47&nbsp;kg&#x202f;&#x2060;—&#x202f; jumps over “the lazy dog”
+The quick brown FOX&#x202f;—&#x2009;weighting
+47&nbsp;kg&#x202f;—&#x2009; jumps over “the lazy dog”
 on&nbsp;sunny&nbsp;morning…
 ```
 
-_**Note:** `&#x202f;` is and HTML entity for a hair space._
+> [!NOTE] > `&#x202f;` is and HTML entity for a non-breaking thin space, `&#x2009;` for a thin space, and `&nbsp;` for a normal-width non-breaking space. HTML entities are shown only for clarity, since the spacing characters are invisible, Richtypo inserts Unicode characters instead, so it can be used for HTML, Markdown, or plan text.
 
 ### Installation
 
@@ -33,7 +33,7 @@ const text = `The quick brown FOX - weighting 47 kg - jumps over "the lazy dog"
 
 richtypo(rules, text);
 
-// → The quick brown FOX&#x202f;&#x2060;—&#x202f;weighting 47&nbsp;kg&#x202f;&#x2060;—&#x202f;
+// → The quick brown FOX&#x202f;—&#x2009;weighting 47&nbsp;kg&#x202f;—&#x2009;
 //   jumps over “the lazy dog” on&nbsp;sunny&nbsp;morning…
 ```
 
@@ -55,8 +55,8 @@ See more examples in [Richtypo docs](https://github.com/sapegin/richtypo.js).
 | **`abbrs`** | wrap abbreviations in `<abbr>` tag | `FOX` | `<abbr>FOX</abbr>` |
 | **`amps`** | wrap ampersands (&) in `<span class="amp">` tag | `Dog & Cat` | `Dog <span class="amp">&</span> Cat` |
 | **`dashesBasic`¹** | replace `-` and `--` with an em-dashes | `dog -- friend` | `dog — friend`² |
-| **`dashesAdvanced`¹** | add a non-breaking hair space before an em dash | `dog - friend` | `dog&#x202f;&#x2060;—&#x202f;friend`² |
-| **`degreeSigns`¹** | add a non-breaking space between a number and a degree sign (°) | `13 °C` | `13&#x202f;°C` |
+| **`dashesAdvanced`¹** | add a non-breaking thin space before an em dash, and a thin space after | `dog - friend` | `dog&#x202f;—&#x2009;friend`² |
+| **`degreeSigns`¹** | add a non-breaking thin space between a number and a degree sign (°) | `13 °C` | `13&#x202f;°C` |
 | **`ellipses`¹** | transform three dots (...) to an ellipsis (…) | `...` | `…` |
 | **`hyphenatedWords`** | wrap words with a hyphen in `<nobr>` tag | `to-day` | `<nobr>to-day</nobr>` |
 | **`numberUnits`¹** | add a non-breaking space between a number and its unit | `2 kg` | `2&nbsp;kg`² |
diff --git a/packages/richtypo-rules-en/src/en.test.ts b/packages/richtypo-rules-en/src/en.test.ts
@@ -14,8 +14,8 @@ function compare(actual: string, expected: string) {
 	expect(
 		actual
 			.replace(/\xA0/g, '__') // non-breaking space
-			.replace(/\u202f/g, '_') // hair space
-			.replace(/\u2060/g, '^') // word joiner
+			.replace(/\u202f/g, '_') // non-breaking thin space
+			.replace(/\u2009/g, '^') // thin space
 			.replace(/—/g, '=') // em dash
 	).toEqual(expected);
 }
@@ -72,14 +72,14 @@ describe('English, recommended rules', () => {
 		);
 	});
 
-	test('add hair space between a number and a degree sign', () => {
+	test('add non-breaking thin space between a number and a degree sign', () => {
 		compare(
 			rt(recommended, `Temperature <b>-30</b> °C? Even -25°C maybe`),
 			`Temperature <b>-30</b>_°C? Even -25_°C__maybe`
 		);
 	});
 
-	test('add hair space between a number and a degree sign 2', () => {
+	test('add non-breaking thin space between a number and a degree sign 2', () => {
 		compare(
 			rt(recommended, `Preheat oven toddd 170 °C.`),
 			`Preheat oven toddd 170_°C.`
@@ -93,22 +93,22 @@ describe('English, recommended rules', () => {
 		);
 	});
 
-	test('add hair spaces before and after a dash', () => {
-		compare(rt(recommended, `Naïve — is word.`), `Naïve_^=_is__word.`);
-		compare(rt(recommended, `Naïve—word.`), `Naïve_^=_word.`);
+	test('add thin spaces before and after a dash', () => {
+		compare(rt(recommended, `Naïve — is word.`), `Naïve_=^is__word.`);
+		compare(rt(recommended, `Naïve—word.`), `Naïve_=^word.`);
 	});
 
 	test('replace a hyphen with an em dash', () => {
 		compare(
 			rt(recommended, `“Richtypo” - is awesome!`),
-			`“Richtypo”_^=_is__awesome!`
+			`“Richtypo”_=^is__awesome!`
 		);
 	});
 
 	test('replace an en dash with an em dash', () => {
 		compare(
 			rt(recommended, `“Richtypo” – is awesome!`),
-			`“Richtypo”_^=_is__awesome!`
+			`“Richtypo”_=^is__awesome!`
 		);
 	});
 
@@ -127,8 +127,8 @@ describe('English, recommended rules', () => {
 	});
 
 	test('replace two or more hyphens with an em dash', () => {
-		compare(rt(recommended, `Naïve -- is word.`), `Naïve_^=_is__word.`);
-		compare(rt(recommended, `Naïve---word.`), `Naïve_^=_word.`);
+		compare(rt(recommended, `Naïve -- is word.`), `Naïve_=^is__word.`);
+		compare(rt(recommended, `Naïve---word.`), `Naïve_=^word.`);
 	});
 
 	test('do not replace two or more hyphens on a separate line (Markdown horizontal line)', () => {
@@ -198,7 +198,7 @@ describe('English, recommended rules', () => {
 				recommended,
 				`Presently she began again. "I wonder if I shall fall right through the earth! How funny it’ll seem to come out among the people that walk with their heads downward! The Antipathies, I think <...> but I shall have to ask them what the name of the country is, you know. Please, Ma’am, is this New Zealand or Australia?" (and she tried to curtsey as she spoke - fancy curtseying as you’re falling through the air! Do you think you could manage it?) "And what an ignorant little girl she’ll think me for asking! No, it’ll never do to ask: perhaps I shall see it written up somewhere."`
 			),
-			`Presently she began again. “I__wonder if__I__shall fall right through the__earth! How funny it’ll__seem to__come out among the__people that walk with their heads downward! The__Antipathies, I__think <...> but I__shall have to__ask them what the__name of__the__country is, you know. Please, Ma’am, is__this New Zealand or__Australia?” (and__she tried to__curtsey as__she spoke_^=_fancy curtseying as__you’re__falling through the__air! Do__you think you could manage it?) “And__what an__ignorant little girl she’ll__think me__for__asking! No, it’ll__never do__to__ask: perhaps I__shall see it__written up__somewhere.”`
+			`Presently she began again. “I__wonder if__I__shall fall right through the__earth! How funny it’ll__seem to__come out among the__people that walk with their heads downward! The__Antipathies, I__think <...> but I__shall have to__ask them what the__name of__the__country is, you know. Please, Ma’am, is__this New Zealand or__Australia?” (and__she tried to__curtsey as__she spoke_=^fancy curtseying as__you’re__falling through the__air! Do__you think you could manage it?) “And__what an__ignorant little girl she’ll__think me__for__asking! No, it’ll__never do__to__ask: perhaps I__shall see it__written up__somewhere.”`
 		);
 		compare(
 			rt(
@@ -291,7 +291,7 @@ describe('English, examples from Readme', () => {
 				recommended,
 				'The quick brown FOX - weighting 47 kg - jumps over "the lazy dog" on sunny morning...'
 			),
-			'The__quick brown FOX_^=_weighting 47__kg_^=_jumps over “the__lazy dog” on__sunny__morning…'
+			'The__quick brown FOX_=^weighting 47__kg_=^jumps over “the__lazy dog” on__sunny__morning…'
 		);
 	});
 	test('selected rules', () => {
diff --git a/packages/richtypo-rules-en/src/en.ts b/packages/richtypo-rules-en/src/en.ts
@@ -20,8 +20,8 @@ const {
 	dash,
 	space,
 	nbsp,
-	hairspace,
-	wordJoiner,
+	thinspace,
+	nbthinspace,
 	tag,
 	notInTag,
 } = commonDefinitions;
@@ -54,28 +54,28 @@ export const prepositions = (text: string) =>
 
 export const dashesAdvanced = (text: string) =>
 	text
-		// Add hair space between , or ) and a dash
+		// Add non-breaking thin space between , or ) and a dash
 		.replace(
 			new RegExp(`(${punctuation})${dash}(${space}?)`, 'gmi'),
-			`$1${hairspace}${emdash}$2`
+			`$1${nbthinspace}${emdash}$2`
 		)
-		// Add hair space between a tag and a dash
+		// Add non-breaking thin space between a tag and a dash
 		.replace(
 			new RegExp(`(?<!\\s)(${tag})${dash}(${space}?)`, 'gmi'),
-			`$1${hairspace}${emdash}$2`
+			`$1${nbthinspace}${emdash}$2`
 		)
 		// Add a work joiner character between emdash and preceding word to avoid line wrapping
 		.replace(
 			new RegExp(
 				`(?<!\\n[^ ]+)([^\\s\\]\\)\\>]+)${space}?${emdash}${space}?`,
 				'gmi'
 			),
-			`$1${hairspace}${wordJoiner}${emdash}${hairspace}`
+			`$1${nbthinspace}${emdash}${thinspace}`
 		)
-		// Add hair spaces before and after an em dash
+		// Add non-breaking thin spaces before, and normal thin space after an em dash
 		.replace(
 			new RegExp(`${space}${emdash}${space}`, 'gmi'),
-			`${hairspace}${emdash}${hairspace}`
+			`${nbthinspace}${emdash}${thinspace}`
 		);
 
 /** @deprecated Use `dashesBasic` or `dashesAdvanced` directly */
diff --git a/packages/richtypo-rules-fr/src/fr.test.ts b/packages/richtypo-rules-fr/src/fr.test.ts
@@ -10,9 +10,10 @@ import recommended, {
 function compare(actual: string, expected: string) {
 	expect(
 		actual
-			.replace(/\xA0/g, '__')
-			.replace(/\u202f/g, '_')
-			.replace(/—/g, '---')
+			.replace(/\xA0/g, '__') // non-breaking space
+			.replace(/\u202f/g, '_') // non-breaking thin space
+			.replace(/\u2009/g, '^') // thin space
+			.replace(/—/g, '=') // em dash
 	).toEqual(expected);
 }
 
@@ -80,7 +81,7 @@ describe('recommended rules', () => {
 				recommended,
 				`Tombe, tombe, tombe ! - Donc Alice, faute d’avoir rien de mieux à faire, se remit à se parler : "Dinah remarquera mon absence ce soir, bien sûr." (Dinah c’était son chat.) "Pourvu qu’on n’oublie pas de lui donner sa jatte de lait à l’heure du thé. Dinah, ma minette, que n’es-tu ici avec moi ? Il n’y a pas de souris dans les airs, j’en ai bien peur ; mais tu pourrais attraper une chauve-souris, et cela ressemble beaucoup à une souris, tu sais. Mais les chats mangent-ils les chauves-souris ?" Ici le sommeil commença à gagner Alice. Elle répétait, à moitié endormie : "Les chats mangent-ils les chauves-souris ? Les chats mangent-ils les chauves-souris ?" Et quelquefois : "Les chauves-souris mangent-elles les chats ?" Car vous comprenez bien que, puisqu’elle ne pouvait répondre ni à l’une ni à l’autre de ces questions, peu importait la manière de les poser. Elle s’assoupissait et commençait à rêver qu’elle se promenait tenant Dinah par la main, lui disant très sérieusement : "Voyons, Dinah, dis-moi la vérité, as-tu jamais mangé des chauves-souris ?" Quand tout à coup, pouf ! la voilà étendue sur un tas de fagots et de feuilles sèches, - et elle a fini de tomber.`
 			),
-			`Tombe, tombe, tombe_!__--- Donc Alice, faute d’avoir rien de__mieux à__faire, se__remit à__se__parler_: «_Dinah remarquera mon absence ce__soir, bien sûr._» (Dinah c’était son chat.) «_Pourvu qu’on__n’oublie pas de__lui donner sa__jatte de__lait à__l’heure du__thé. Dinah, ma__minette, que n’es-tu ici avec moi_? Il__n’y__a__pas de__souris dans les airs, j’en__ai__bien peur_; mais tu__pourrais attraper une chauve-souris, et__cela ressemble beaucoup à__une souris, tu__sais. Mais les chats mangent-ils les chauves-souris_?_» Ici le__sommeil commença à__gagner Alice. Elle répétait, à__moitié endormie_: «_Les chats mangent-ils les chauves-souris_? Les chats mangent-ils les chauves-souris_?_» Et__quelquefois_: «_Les chauves-souris mangent-elles les chats_?_» Car vous comprenez bien que, puisqu’elle ne__pouvait répondre ni__à__l’une ni__à__l’autre de__ces questions, peu importait la__manière de__les poser. Elle s’assoupissait et__commençait à__rêver qu’elle se__promenait tenant Dinah par la__main, lui disant très sérieusement_: «_Voyons, Dinah, dis-moi la__vérité, as-tu jamais mangé des chauves-souris_?_» Quand tout à__coup, pouf_! la__voilà étendue sur un__tas de__fagots et__de__feuilles sèches,__--- et__elle a__fini de__tomber.`
+			`Tombe, tombe, tombe_!__= Donc Alice, faute d’avoir rien de__mieux à__faire, se__remit à__se__parler_: «_Dinah remarquera mon absence ce__soir, bien sûr._» (Dinah c’était son chat.) «_Pourvu qu’on__n’oublie pas de__lui donner sa__jatte de__lait à__l’heure du__thé. Dinah, ma__minette, que n’es-tu ici avec moi_? Il__n’y__a__pas de__souris dans les airs, j’en__ai__bien peur_; mais tu__pourrais attraper une chauve-souris, et__cela ressemble beaucoup à__une souris, tu__sais. Mais les chats mangent-ils les chauves-souris_?_» Ici le__sommeil commença à__gagner Alice. Elle répétait, à__moitié endormie_: «_Les chats mangent-ils les chauves-souris_? Les chats mangent-ils les chauves-souris_?_» Et__quelquefois_: «_Les chauves-souris mangent-elles les chats_?_» Car vous comprenez bien que, puisqu’elle ne__pouvait répondre ni__à__l’une ni__à__l’autre de__ces questions, peu importait la__manière de__les poser. Elle s’assoupissait et__commençait à__rêver qu’elle se__promenait tenant Dinah par la__main, lui disant très sérieusement_: «_Voyons, Dinah, dis-moi la__vérité, as-tu jamais mangé des chauves-souris_?_» Quand tout à__coup, pouf_! la__voilà étendue sur un__tas de__fagots et__de__feuilles sèches,__= et__elle a__fini de__tomber.`
 		);
 		compare(
 			richtypo(
diff --git a/packages/richtypo-rules-fr/src/fr.ts b/packages/richtypo-rules-fr/src/fr.ts
@@ -14,7 +14,7 @@ import {
 	ellipses,
 } from 'richtypo-rules-common';
 
-const { punctuation, nbsp, space, hairspace, dash, notInTag } = definitions;
+const { punctuation, nbsp, space, nbthinspace, dash, notInTag } = definitions;
 
 const semicolon = '(?<!&\\S*);';
 const ordinal = '(ème|er|ère|nd)s?';
@@ -48,11 +48,11 @@ export const punctuationMarks = (text: string) =>
 	text
 		.replace(
 			new RegExp(`${notInTag}(?:${space}+)?([\\?!:»]|${semicolon})`, 'gmi'),
-			`${hairspace}$1`
+			`${nbthinspace}$1`
 		)
 		.replace(
 			new RegExp(`${notInTag}(«)(?:${space}+)?`, 'gmi'),
-			`$1${hairspace}`
+			`$1${nbthinspace}`
 		);
 
 export {
diff --git a/packages/richtypo-rules-ru/src/ru.test.ts b/packages/richtypo-rules-ru/src/ru.test.ts
@@ -6,8 +6,8 @@ import recommended, { quotes, numberSeparators } from './ru';
 function compare(actual: string, expected: string) {
 	expect(
 		actual
-			.replace(/\xA0/g, '_')
-			.replace(/\u202f/gm, '^')
+			.replace(/\xA0/g, '_') // non-breaking space
+			.replace(/\u202f/gm, '^') // non-breaking thin space
 			.replace(/—/g, '=')
 	).toEqual(expected);
 }
@@ -34,7 +34,7 @@ describe('Russian, recommended rules', () => {
 		);
 	});
 
-	test('add hair space after degree sign', () => {
+	test('add non-breaking thin space after degree sign', () => {
 		compare(richtypo(recommended, '13 °C'), '13^°C');
 	});
 
diff --git a/packages/richtypo-rules-ru/src/ru.ts b/packages/richtypo-rules-ru/src/ru.ts
@@ -13,17 +13,25 @@ import {
 	definitions,
 } from 'richtypo-rules-common';
 
-const { notInTag, space, nbsp, hairspace, endash, emdash, dash, punctuation } =
-	definitions;
-const thousandsSeparator = hairspace;
+const {
+	notInTag,
+	space,
+	nbsp,
+	nbthinspace,
+	endash,
+	emdash,
+	dash,
+	punctuation,
+} = definitions;
+const thousandsSeparator = nbthinspace;
 const decimalsSeparator = ',';
 const openingQuote = '«';
 const closingQuote = '»';
 const particle = 'б|бы|ж|же|ли|ль';
 
 export const dashesAdvanced = (text: string) =>
 	text
-		// Replace - at the beginnning of a line or right after a tag with em dash
+		// Replace - at the beginning of a line or right after a tag with em dash
 		.replace(new RegExp(`^[-${endash}](${space})`, 'gmi'), `${emdash}$1`)
 		// Add non-braking space between , or ) and a dash
 		.replace(
