@jjlmoya/utils-tools 1.1.0 → 1.3.0

package/src/tool/text-pixel-calculator/i18n/pl.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Jak obliczyć szerokość tekstu w pikselach online?',
+    answer: 'Wklej tekst do pola wejściowego, skonfiguruj czcionkę i rozmiar, a narzędzie automatycznie użyje interfejsu API Canvas przeglądarki, aby zwrócić dokładną szerokość w pikselach.',
+  },
+  {
+    question: 'Dlaczego szerokość w pikselach różni się między krojami pisma?',
+    answer: 'Większość czcionek jest proporcjonalna, co oznacza, że każdy znak ma inną szerokość. Na przykład wielka litera „M” jest zawsze szersza niż mała litera „i” w standardowej czcionce bezszeryfowej.',
+  },
+  {
+    question: 'Czy mierzenie znaków to to samo co mierzenie pikseli?',
+    answer: 'Nie. Mierzenie znaków podaje długość ciągu, natomiast mierzenie pikseli podaje przestrzeń wizualną, jaką on zajmuje. Jest to kluczowe dla upewnienia się, że tekst nie wystaje poza swój kontener w projekcie internetowym.',
+  },
+  {
+    question: 'Czy mogę użyć dowolnego kroju pisma z Google Fonts?',
+    answer: 'Tak, o ile czcionka jest zainstalowana w systemie operacyjnym lub załadowana na bieżącej stronie, narzędzie dokładnie zmierzy jej wymiary.',
+  },
+  {
+    question: 'Czy przetwarzanie prywatnego tekstu lub fragmentów kodu jest bezpieczne?',
+    answer: 'Tak. Kalkulator działa całkowicie lokalnie. Żadne dane nie są wysyłane do zewnętrznych serwerów, co gwarantuje pełną prywatność Twoich projektów.',
+  },
+];
+
+const howToData = [
+  { name: 'Wpisz tekst', text: 'Wpisz lub wklej tekst, który chcesz zmierzyć, w obszarze wejściowym.' },
+  { name: 'Skonfiguruj czcionkę', text: 'Ustaw rodzinę czcionek, rozmiar w pikselach, wagę i to, czy ma być pochylona.' },
+  { name: 'Odczytaj wynik', text: 'Szerokość w pikselach i liczba znaków są aktualizowane w czasie rzeczywistym.' },
+  { name: 'Skopiuj wartość', text: 'Kliknij „Kopiuj szerokość”, aby zapisać liczbę pikseli w schowku.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'Jak zmierzyć szerokość tekstu w pikselach',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Kalkulator szerokości pikseli tekstu',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Dokładnie oblicz szerokość dowolnego tekstu w pikselach na podstawie czcionki, rozmiaru i stylu.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Tekst do zmierzenia',
+  textPlaceholder: 'Wpisz lub wklej tutaj tekst, który chcesz zmierzyć...',
+  defaultText: 'Witaj świecie',
+  fontLabel: 'Rodzina czcionek',
+  sizeLabel: 'Rozmiar (px)',
+  weightLabel: 'Waga',
+  italicLabel: 'Kursywa',
+  widthLabel: 'Szerokość (piksele)',
+  charsLabel: 'Znaki',
+  previewLabel: 'Podgląd wizualny',
+  copyBtn: 'Kopiuj szerokość',
+  resetBtn: 'Resetuj',
+  copyDone: 'Szerokość skopiowana',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'kalkulator-szerokosci-pikseli-tekstu',
+  title: 'Kalkulator szerokości pikseli tekstu',
+  description: 'Dokładnie oblicz, jak szeroki jest dowolny tekst w pikselach na podstawie czcionki, rozmiaru i stylu. Darmowe narzędzie dla projektantów i programistów.',
+  ui,
+  faqTitle: 'Często zadawane pytania',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Źródła',
+  bibliography: [
+    { name: 'W3C: CSS Text Module Level 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Understanding variable fonts', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Zmierz dokładną szerokość dowolnego tekstu w pikselach' },
+    {
+      type: 'paragraph',
+      html: 'Czy Twój tekst wystaje poza swój kontener? Musisz wiedzieć, ile miejsca zajmuje nagłówek przed jego wyrenderowaniem? Interfejs <strong>API Canvas przeglądarki</strong> umożliwia pomiar dokładnej szerokości dowolnego ciągu tekstowego z precyzją piksela, bez renderowania go w DOM.',
+    },
+    { type: 'title', level: 3, text: 'Dlaczego liczenie znaków nie wystarczy' },
+    {
+      type: 'paragraph',
+      html: 'Nowoczesne kroje pisma są <strong>proporcjonalne</strong>: każdy glif ma inną szerokość. Litera „W” może zajmować trzy razy więcej miejsca niż „i”. Liczba znaków nic nie mówi o rzeczywistej przestrzeni wizualnej, jaką zajmuje tekst.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Projektowanie stron www:</strong> Zapobiegaj przepełnieniu przycisków, etykiet i komórek tabel.',
+        '<strong>SEO:</strong> Wyszukiwarki ucinają tytuły według pikseli, a nie znaków.',
+        '<strong>Canvas i PDF:</strong> Oblicz dokładną pozycję przed programowym narysowaniem tekstu.',
+        '<strong>Tooltipy i dymki:</strong> Dynamicznie zmieniaj rozmiar kontenerów na podstawie tekstu wewnętrznego.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Jak działa pomiar za pomocą Canvas' },
+    {
+      type: 'paragraph',
+      html: 'Metoda <code>ctx.measureText()</code> interfejsu API Canvas zwraca obiekt <code>TextMetrics</code> z właściwością <code>width</code> odzwierciedlającą szerokość w pikselach CSS przy użyciu aktualnie aktywnej czcionki. To narzędzie konfiguruje kontekst z Twoją czcionką, rozmiarem, wagą i stylem przed pomiarem.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Przykład Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Witaj świecie').width; // np. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Prywatność i przetwarzanie lokalne' },
+    {
+      type: 'paragraph',
+      html: 'Wszystkie obliczenia odbywają się w Twojej przeglądarce. Żaden tekst, fragment kodu ani prywatne dane nie opuszczają Twojego urządzenia.',
+    },
+    {
+      type: 'tip',
+      title: 'Kroje pisma Google Fonts',
+      html: 'Aby dokładnie zmierzyć krój pisma Google Fonts, najpierw upewnij się, że jest on załadowany na stronie lub zainstalowany w systemie. W przeciwnym razie przeglądarka użyje czcionki zastępczej i wynik będzie się różnił.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/pt.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Como calcular a largura em píxeis de um texto online?',
+    answer: 'Cole o seu texto na caixa de entrada, configure a fonte e o tamanho, e a ferramenta utilizará automaticamente a API Canvas do navegador para devolver a largura exata em píxeis.',
+  },
+  {
+    question: 'Por que a largura em píxeis varia entre diferentes fontes?',
+    answer: "A maioria das fontes são proporcionais, o que significa que cada caráter tem uma largura diferente. Por exemplo, um 'M' maiúsculo é sempre mais largo do que um 'i' minúsculo numa fonte sans-serif padrão.",
+  },
+  {
+    question: 'Medir carateres é o mesmo que medir píxeis?',
+    answer: 'Não. Medir carateres dá-lhe o comprimento da string, enquanto medir píxeis dá-lhe o espaço visual que ela ocupa. Isto é crucial para garantir que o texto não transborde do seu contentor num web design.',
+  },
+  {
+    question: 'Posso usar qualquer fonte do Google Fonts?',
+    answer: 'Sim, desde que a fonte esteja instalada no seu sistema operativo ou carregada na página atual, a ferramenta medirá as suas dimensões com precisão.',
+  },
+  {
+    question: 'É seguro processar textos privados ou trechos de código?',
+    answer: 'Sim. A calculadora funciona inteiramente de forma local. Nenhuns dados são enviados para servidores externos, garantindo total privacidade para os seus projetos.',
+  },
+];
+
+const howToData = [
+  { name: 'Introduza o texto', text: 'Escreva ou cole o texto que deseja medir na área de entrada.' },
+  { name: 'Configure a fonte', text: 'Defina a família da fonte, o tamanho em píxeis, o peso e se é itálico.' },
+  { name: 'Leia o resultado', text: 'A largura em píxeis e a contagem de carateres são atualizadas em tempo real.' },
+  { name: 'Copie o valor', text: 'Clique em "Copiar largura" para guardar o número de píxeis na área de transferência.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'Como medir a largura do texto em píxeis',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Calculadora de Largura de Píxeis de Texto',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Calcule com precisão a largura em píxeis de qualquer texto com base na fonte, tamanho e estilo.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Texto a medir',
+  textPlaceholder: 'Escreva ou cole aqui o texto que deseja medir...',
+  defaultText: 'Olá Mundo',
+  fontLabel: 'Família da fonte',
+  sizeLabel: 'Tamanho (px)',
+  weightLabel: 'Peso',
+  italicLabel: 'Itálico',
+  widthLabel: 'Largura (píxeis)',
+  charsLabel: 'Carateres',
+  previewLabel: 'Pré-visualização visual',
+  copyBtn: 'Copiar largura',
+  resetBtn: 'Repor',
+  copyDone: 'Largura copiada',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'calculadora-largura-pixel-texto',
+  title: 'Calculadora de Largura de Píxeis de Texto',
+  description: 'Calcule com precisão a largura de qualquer texto em píxeis com base na fonte, tamanho e estilo. Ferramenta gratuita para designers e programadores.',
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Referências',
+  bibliography: [
+    { name: 'W3C: CSS Text Module Level 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Understanding variable fonts', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Meça a largura exata em píxeis de qualquer texto' },
+    {
+      type: 'paragraph',
+      html: 'O seu texto está a transbordar do contentor? Precisa de saber quanto espaço um título ocupa antes de o renderizar? A <strong>API Canvas do navegador</strong> permite-lhe medir a largura exata de qualquer string de texto com precisão de píxeis, sem a renderizar no DOM.',
+    },
+    { type: 'title', level: 3, text: 'Por que a contagem de carateres não é suficiente' },
+    {
+      type: 'paragraph',
+      html: 'As fontes modernas são <strong>proporcionais</strong>: cada glifo tem uma largura diferente. Um "W" pode ocupar três vezes mais espaço do que um "i". O número de carateres não diz nada sobre o espaço visual real que o texto ocupa.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Web design:</strong> Previna o transbordo em botões, etiquetas e células de tabela.',
+        '<strong>SEO:</strong> Os motores de busca truncam títulos por píxeis, não por carateres.',
+        '<strong>Canvas e PDF:</strong> Calcule a posição exata antes de desenhar o texto programaticamente.',
+        '<strong>Tooltips e balões:</strong> Dimensione dinamicamente os contentores com base no texto interior.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Como funciona a medição com Canvas' },
+    {
+      type: 'paragraph',
+      html: 'O método <code>ctx.measureText()</code> da API Canvas devolve um objeto <code>TextMetrics</code> com uma propriedade <code>width</code> que reflete a largura CSS em píxeis usando a fonte atualmente ativa. Esta ferramenta configura o contexto com a sua fonte, tamanho, peso e estilo antes de medir.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Exemplo de Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Olá Mundo').width; // ex: 74.5",
+    },
+    { type: 'title', level: 3, text: 'Privacidade e processamento local' },
+    {
+      type: 'paragraph',
+      html: 'Todo o cálculo acontece no seu navegador. Nenhuns textos, trechos de código ou dados privados saem do seu dispositivo.',
+    },
+    {
+      type: 'tip',
+      title: 'Fontes do Google Fonts',
+      html: 'Para medir uma fonte do Google Fonts com precisão, certifique-se primeiro de que ela está carregada na página ou instalada no seu sistema. Caso contrário, o navegador recorrerá a uma fonte substituta e o resultado será diferente.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/ru.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Как рассчитать ширину текста в пикселях онлайн?',
+    answer: 'Вставьте текст в поле ввода, настройте шрифт и размер, и инструмент автоматически использует Canvas API браузера, чтобы вернуть точную ширину в пикселях.',
+  },
+  {
+    question: 'Почему ширина в пикселях различается у разных шрифтов?',
+    answer: 'Большинство шрифтов являются пропорциональными, что означает, что каждый символ имеет разную ширину. Например, заглавная буква «M» всегда шире строчной «i» в стандартном шрифте без засечек.',
+  },
+  {
+    question: 'Равна ли длина в символах ширине в пикселях?',
+    answer: 'Нет. Количество символов дает вам длину строки, а измерение в пикселях — визуальное пространство, которое она занимает. Это крайне важно для предотвращения переполнения контейнера текстом в веб-дизайне.',
+  },
+  {
+    question: 'Могу ли я использовать любой шрифт Google Fonts?',
+    answer: 'Да, если шрифт установлен в вашей операционной системе или загружен на текущей странице, инструмент точно измерит его размеры.',
+  },
+  {
+    question: 'Безопасно ли обрабатывать личный текст или фрагменты кода?',
+    answer: 'Да. Калькулятор работает полностью локально. Данные не отправляются на внешние серверы, что гарантирует полную конфиденциальность ваших проектов.',
+  },
+];
+
+const howToData = [
+  { name: 'Введите текст', text: 'Введите или вставьте текст, который вы хотите измерить, в поле ввода.' },
+  { name: 'Настройте шрифт', text: 'Укажите семейство шрифтов, размер в пикселях, насыщенность и начертание (курсив).' },
+  { name: 'Получите результат', text: 'Ширина в пикселях и количество символов обновляются в режиме реального времени.' },
+  { name: 'Скопируйте значение', text: 'Нажмите «Копировать ширину», чтобы сохранить количество пикселей в буфер обмена.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'Как измерить ширину текста в пикселях',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Калькулятор ширины текста в пикселях',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Точно рассчитайте ширину любого текста в пикселях на основе шрифта, размера и стиля.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Текст для измерения',
+  textPlaceholder: 'Введите или вставьте здесь текст, который хотите измерить...',
+  defaultText: 'Привет, мир',
+  fontLabel: 'Семейство шрифтов',
+  sizeLabel: 'Размер (px)',
+  weightLabel: 'Насыщенность',
+  italicLabel: 'Курсив',
+  widthLabel: 'Ширина (пиксели)',
+  charsLabel: 'Символы',
+  previewLabel: 'Визуальный просмотр',
+  copyBtn: 'Копировать ширину',
+  resetBtn: 'Сброс',
+  copyDone: 'Ширина скопирована',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'kalkulyator-shiriny-pikseley-teksta',
+  title: 'Калькулятор ширины текста в пикселях',
+  description: 'Точно рассчитайте ширину любого текста в пикселях на основе шрифта, размера и стиля. Бесплатный инструмент для дизайнеров и разработчиков.',
+  ui,
+  faqTitle: 'Часто задаваемые вопросы',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Источники',
+  bibliography: [
+    { name: 'W3C: CSS Text Module Level 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Understanding variable fonts', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Измерьте точную ширину любого текста в пикселях' },
+    {
+      type: 'paragraph',
+      html: 'Ваш текст выходит за пределы контейнера? Нужно узнать, сколько места занимает заголовок перед рендерингом? <strong>Canvas API браузера</strong> позволяет измерить точную ширину любой текстовой строки с пиксельной точностью без ее отрисовки в DOM.',
+    },
+    { type: 'title', level: 3, text: 'Почему подсчета символов недостаточно' },
+    {
+      type: 'paragraph',
+      html: 'Современные шрифты являются <strong>пропорциональными</strong>: каждый глиф имеет разную ширину. Буква «W» может занимать в три раза больше места, чем «i». Количество символов ничего не говорит вам о фактическом визуальном пространстве, которое занимает текст.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Веб-дизайн:</strong> предотвращайте переполнение в кнопках, метках и ячейках таблиц.',
+        '<strong>SEO:</strong> поисковые системы обрезают заголовки по пикселям, а не по символам.',
+        '<strong>Canvas и PDF:</strong> рассчитывайте точное положение перед программной отрисовкой текста.',
+        '<strong>Подсказки и баблы:</strong> динамически устанавливайте размер контейнеров на основе текста внутри.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Как работает измерение с помощью Canvas' },
+    {
+      type: 'paragraph',
+      html: 'Метод <code>ctx.measureText()</code> интерфейса Canvas API возвращает объект <code>TextMetrics</code> со свойством <code>width</code>, отражающим ширину в CSS-пикселях с использованием текущего активного шрифта. Этот инструмент настраивает контекст с вашим шрифтом, размером, насыщенностью и стилем перед измерением.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Пример использования Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Привет, мир').width; // например, 74.5",
+    },
+    { type: 'title', level: 3, text: 'Конфиденциальность и локальная обработка' },
+    {
+      type: 'paragraph',
+      html: 'Все вычисления происходят в вашем браузере. Никакой текст, фрагмент кода или личные данные не покидают ваше устройство.',
+    },
+    {
+      type: 'tip',
+      title: 'Шрифты Google Fonts',
+      html: 'Чтобы точно измерить шрифт Google Fonts, сначала убедитесь, что он загружен на страницу или установлен в вашей системе. В противном случае браузер вернется к подменному шрифту, и результат будет отличаться.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/sv.ts

@@ -0,0 +1,133 @@
+import type { ToolLocaleContent } from '../../../types';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { TextPixelCalculatorUI } from '../ui';
+
+const faqData = [
+  {
+    question: 'Hur beräknar jag pixelbredden för text online?',
+    answer: 'Klistra in din text i inmatningsrutan, konfigurera typsnitt och storlek, så använder verktyget automatiskt webbläsarens Canvas API för att returnera den exakta bredden i pixlar.',
+  },
+  {
+    question: 'Varför varierar pixelbredden mellan olika typsnitt?',
+    answer: "De flesta typsnitt är proportionella, vilket innebär att varje tecken har en annan bredd. Till exempel är ett versalt 'M' alltid bredare än ett gement 'i' i ett vanligt sans-serif-typsnitt.",
+  },
+  {
+    question: 'Är mätning av tecken detsamma som mätning av pixlar?',
+    answer: 'Nej. Mätning av tecken ger dig stränglängden, medan mätning av pixlar ger dig det visuella utrymmet den upptar. Detta är avgörande för att säkerställa att texten inte flödar över sin behållare i en webbdesign.',
+  },
+  {
+    question: 'Kan jag använda vilket Google Fonts-typsnitt som helst?',
+    answer: 'Ja, så länge typsnittet är installerat på ditt operativsystem eller laddat på den aktuella sidan, kommer verktyget att mäta dess dimensioner korrekt.',
+  },
+  {
+    question: 'Är det säkert att bearbeta privat text eller kodsnuttar?',
+    answer: 'Ja. Kalkylatorn fungerar helt lokalt. Inga data skickas till externa servrar, vilket garanterar fullständig integritet för dina projekt.',
+  },
+];
+
+const howToData = [
+  { name: 'Ange texten', text: 'Skriv eller klistra in texten du vill mäta i inmatningsområdet.' },
+  { name: 'Konfigurera typsnittet', text: 'Ställ in typsnittsfamilj, storlek i pixlar, vikt och om den ska vara kursiv.' },
+  { name: 'Läs av resultatet', text: 'Pixelbredden och teckenantalet uppdateras i realtid.' },
+  { name: 'Kopiera värdet', text: 'Klicka på "Kopiera bredd" för att spara pixelantalet till klippbordet.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: 'Hur man mäter textbredd i pixlar',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Textpixelbreddskalkylator',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Beräkna pixelbredden för valfri text korrekt baserat på typsnitt, storlek och stil.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Text att mäta',
+  textPlaceholder: 'Skriv eller klistra in texten du vill mäta här...',
+  defaultText: 'Hej världen',
+  fontLabel: 'Typsnittsfamilj',
+  sizeLabel: 'Storlek (px)',
+  weightLabel: 'Vikt',
+  italicLabel: 'Kursiv',
+  widthLabel: 'Bredd (pixlar)',
+  charsLabel: 'Tecken',
+  previewLabel: 'Visuell förhandsgranskning',
+  copyBtn: 'Kopiera bredd',
+  resetBtn: 'Återställ',
+  copyDone: 'Bredd kopierad',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'text-pixel-width-calculator-sv',
+  title: 'Text Pixel Beräknare',
+  description: 'Beräkna exakt hur bred en text är i pixlar baserat på typsnitt, storlek och stil. Gratis verktyg för designers och utvecklare.',
+  ui,
+  faqTitle: 'Vanliga frågor',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Referenser',
+  bibliography: [
+    { name: 'W3C: CSS Text Module Level 3', url: 'https://www.w3.org/TR/css-text-3/' },
+    { name: 'Google Fonts: Understanding variable fonts', url: 'https://fonts.google.com/knowledge/glossary/variable_fonts' },
+  ],
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', level: 2, text: 'Mät den exakta pixelbredden för valfri text' },
+    {
+      type: 'paragraph',
+      html: 'Flödar din text över sin behållare? Behöver du veta hur mycket utrymme en rubrik tar upp innan den renderas? Webbläsarens <strong>Canvas API</strong> låter dig mäta den exakta bredden på valfri textsträng med pixelprecision, utan att rendera den i DOM.',
+    },
+    { type: 'title', level: 3, text: 'Varför teckenräkning inte räcker' },
+    {
+      type: 'paragraph',
+      html: 'Moderna typsnitt är <strong>proportionella</strong>: varje glyf har en annan bredd. Ett "W" kan ta upp tre gånger mer utrymme än ett "i". Antalet tecken säger ingenting om det faktiska visuella utrymmet texten upptar.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Webbdesign:</strong> Förhindra spill i knappar, etiketter och tabellceller.',
+        '<strong>SEO:</strong> Sökmotorer trunkerar titlar efter pixlar, inte efter tecken.',
+        '<strong>Canvas och PDF:</strong> Beräkna den exakta positionen innan du ritar text programmatiskt.',
+        '<strong>Tooltips och bubblor:</strong> Storleksanpassa behållare dynamiskt baserat på den inre texten.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Hur mätning fungerar med Canvas' },
+    {
+      type: 'paragraph',
+      html: 'Metoden <code>ctx.measureText()</code> i Canvas API returnerar ett <code>TextMetrics</code>-objekt med en <code>width</code>-egenskap som speglar CSS-pixelbredden med det för närvarande aktiva typsnittet. Detta verktyg konfigurerar kontexten med ditt typsnitt, storlek, vikt och stil före mätning.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Exempel på Canvas measureText',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Hej världen').width; // t.ex. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Integritet och lokal bearbetning' },
+    {
+      type: 'paragraph',
+      html: 'All beräkning sker i din webbläsare. Ingen text, kodsnutt eller privat data lämnar din enhet.',
+    },
+    {
+      type: 'tip',
+      title: 'Google Fonts typsnitt',
+      html: 'För att mäta ett Google Fonts-typsnitt korrekt, se först till att det är laddat på sidan eller installerat på ditt system. Annars kommer webbläsaren att falla tillbaka på ett ersättningstypsnitt och resultatet kommer att skilja sig.',
+    },
+  ],
+};