@jjlmoya/utils-tools 1.2.0 → 1.4.0

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-beraknare',
+  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.',
+    },
+  ],
+};

package/src/tool/text-pixel-calculator/i18n/tr.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: 'Metnin piksel genişliğini çevrimiçi olarak nasıl hesaplarım?',
+    answer: 'Metninizi giriş kutusuna yapıştırın, yazı tipini ve boyutunu yapılandırın; araç, tam piksel genişliğini döndürmek için otomatik olarak tarayıcı Canvas API\'sini kullanacaktır.',
+  },
+  {
+    question: 'Piksel genişliği neden yazı tipleri arasında değişir?',
+    answer: "Çoğu yazı tipi orantılıdır, yani her karakterin farklı bir genişliği vardır. Örneğin, standart bir sans-serif yazı tipinde büyük 'M' harfi her zaman küçük 'i' harfinden daha geniştir.",
+  },
+  {
+    question: 'Karakter ölçmekle piksel ölçmek aynı şey midir?',
+    answer: 'Hayır. Karakter ölçmek size dizge uzunluğunu verirken, piksel ölçmek kapladığı görsel alanı verir. Bu, bir web tasarımında metnin kapsayıcısından taşmamasını sağlamak için çok önemlidir.',
+  },
+  {
+    question: 'Herhangi bir Google Fonts yazı tipini kullanabilir miyim?',
+    answer: 'Evet, yazı tipi işletim sisteminizde yüklü olduğu veya mevcut sayfada yüklendiği sürece araç boyutlarını doğru bir şekilde ölçecektir.',
+  },
+  {
+    question: 'Özel metinleri veya kod parçacıklarını işlemek güvenli midir?',
+    answer: 'Evet. Hesaplayıcı tamamen yerel olarak çalışır. Harici sunuculara hiçbir veri gönderilmez, projeleriniz için tam gizlilik garanti edilir.',
+  },
+];
+
+const howToData = [
+  { name: 'Metni girin', text: 'Ölçmek istediğiniz metni giriş alanına yazın veya yapıştırın.' },
+  { name: 'Yazı tipini yapılandırın', text: 'Yazı tipi ailesini, piksel cinsinden boyutunu, ağırlığını ve italik olup olmadığını ayarlayın.' },
+  { name: 'Sonucu okuyun', text: 'Piksel genişliği ve karakter sayısı gerçek zamanlı olarak güncellenir.' },
+  { name: 'Değeri kopyalayın', text: 'Piksel sayısını panoya kaydetmek için "Genişliği Kopyala"ya tıklayın.' },
+];
+
+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: 'Metin genişliği piksel cinsinden nasıl ölçülür?',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Metin Piksel Genişliği Hesaplayıcı',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Herhangi bir metnin yazı tipine, boyutuna ve stiline göre piksel genişliğini doğru bir şekilde hesaplayın.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Ölçülecek metin',
+  textPlaceholder: 'Ölçmek istediğiniz metni buraya yazın veya yapıştırın...',
+  defaultText: 'Merhaba Dünya',
+  fontLabel: 'Yazı tipi ailesi',
+  sizeLabel: 'Boyut (px)',
+  weightLabel: 'Ağırlık',
+  italicLabel: 'İtalik',
+  widthLabel: 'Genişlik (piksel)',
+  charsLabel: 'Karakter',
+  previewLabel: 'Görsel önizleme',
+  copyBtn: 'Genişliği Kopyala',
+  resetBtn: 'Sıfırla',
+  copyDone: 'Genişlik kopyalandı',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'metin-piksel-genisligi-hesaplayici',
+  title: 'Metin Piksel Genişliği Hesaplayıcı',
+  description: 'Yazı tipi, boyut ve stile göre herhangi bir metnin kaç piksel genişliğinde olduğunu doğru bir şekilde hesaplayın. Tasarımcılar ve geliştiriciler için ücretsiz araç.',
+  ui,
+  faqTitle: 'Sıkça Sorulan Sorular',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Kaynaklar',
+  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: 'Herhangi bir metnin tam piksel genişliğini ölçün' },
+    {
+      type: 'paragraph',
+      html: 'Metniniz kapsayıcısından taşıyor mu? Bir başlığı oluşturmadan önce ne kadar yer kapladığını bilmeniz mi gerekiyor? <strong>Tarayıcı Canvas API\'si</strong>, herhangi bir metin dizisinin tam genişliğini DOM\'da oluşturmadan piksel hassasiyetiyle ölçmenize olanak tanır.',
+    },
+    { type: 'title', level: 3, text: 'Neden karakter sayımı yeterli değildir?' },
+    {
+      type: 'paragraph',
+      html: 'Modern yazı tipleri <strong>orantılıdır</strong>: her glifin farklı bir genişliği vardır. Bir "W", bir "i"den üç kat daha fazla yer kaplayabilir. Karakter sayısı size metnin kapladığı gerçek görsel alan hakkında hiçbir şey söylemez.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Web tasarımı:</strong> Düğmelerde, etiketlerde ve tablo hücrelerinde taşmayı önleyin.',
+        '<strong>SEO:</strong> Arama motorları başlıkları karakter sayısına göre değil, piksellere göre kısaltır.',
+        '<strong>Canvas ve PDF:</strong> Programlı olarak metin çizmeden önce tam konumu hesaplayın.',
+        '<strong>Tooltip\'ler ve balonlar:</strong> Kapsayıcıları iç metne göre dinamik olarak boyutlandırın.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Canvas ile ölçüm nasıl çalışır?' },
+    {
+      type: 'paragraph',
+      html: 'Canvas API\'sinin <code>ctx.measureText()</code> yöntemi, o anda aktif olan yazı tipini kullanarak CSS piksel genişliğini yansıtan bir <code>width</code> özelliğine sahip bir <code>TextMetrics</code> nesnesi döndürür. Bu araç, ölçümden önce bağlamı yazı tipiniz, boyutunuz, ağırlığınız ve stilinizle yapılandırır.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Canvas measureText örneği',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Merhaba Dünya').width; // örn. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Gizlilik ve yerel işleme' },
+    {
+      type: 'paragraph',
+      html: 'Tüm hesaplamalar tarayıcınızda gerçekleşir. Cihazınızdan hiçbir metin, kod parçacığı veya özel veri çıkmaz.',
+    },
+    {
+      type: 'tip',
+      title: 'Google Fonts yazı tipleri',
+      html: 'Bir Google Fonts yazı tipini doğru bir şekilde ölçmek için önce sayfada yüklendiğinden veya sisteminizde yüklü olduğundan emin olun. Aksi takdirde tarayıcı yedek bir yazı tipine dönecektir ve sonuç farklı olacaktır.',
+    },
+  ],
+};