Add back blank before percent sign ("%") based on language (#13590)

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

src/common/entity/compute_state_display.ts

@@ -2,17 +2,18 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  UPDATE_SUPPORT_PROGRESS,
   updateIsInstallingFromAttributes,
+  UPDATE_SUPPORT_PROGRESS,
 } from "../../data/update";
+import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
 import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { computeDomain } from "./compute_domain";
+import { supportsFeatureFromAttributes } from "./supports-feature";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -67,7 +68,7 @@ export const computeStateDisplayFromEntityAttributes = (
     const unit = !attributes.unit_of_measurement
       ? ""
       : attributes.unit_of_measurement === "%"
-      ? "%"
+      ? blankBeforePercent(locale) + "%"
       : ` ${attributes.unit_of_measurement}`;
     return `${formatNumber(state, locale)}${unit}`;
   }

src/common/translations/blank_before_percent.ts

@@ -0,0 +1,18 @@
+import { FrontendLocaleData } from "../../data/translation";
+
+// Logic based on https://en.wikipedia.org/wiki/Percent_sign#Form_and_spacing
+export const blankBeforePercent = (
+  localeOptions: FrontendLocaleData
+): string => {
+  switch (localeOptions.language) {
+    case "cz":
+    case "de":
+    case "fi":
+    case "fr":
+    case "sk":
+    case "sv":
+      return " ";
+    default:
+      return "";
+  }
+};

src/components/ha-gauge.ts

@@ -2,6 +2,7 @@ import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
+import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
@@ -133,7 +134,11 @@ export class Gauge extends LitElement {
               ? this._segment_label
               : this.valueText || formatNumber(this.value, this.locale)
           }${
-      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
+      this._segment_label
+        ? ""
+        : this.label === "%"
+        ? blankBeforePercent(this.locale) + "%"
+        : ` ${this.label}`
     }
         </text>
       </svg>`;