@jjlmoya/utils-tools 1.2.0 → 1.4.0

package/src/tool/text-pixel-calculator/i18n/ja.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: 'いいえ。文字数を測ると文字列の長さがわかりますが、ピクセルを測るとそれが占める視覚的なスペースがわかります。これは、Webデザインでテキストがコンテナからはみ出さないようにするために非常に重要です。',
+  },
+  {
+    question: 'Google Fontsの書体はどれでも使えますか？',
+    answer: 'はい。フォントがOSにインストールされているか、現在のページに読み込まれている限り、ツールはその寸法を正確に測定します。',
+  },
+  {
+    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: 'JPY' },
+  description: 'フォント、サイズ、スタイルに基づいて、あらゆるテキストのピクセル幅を正確に計算します。',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: '測定するテキスト',
+  textPlaceholder: '測定したいテキストをここに入力または貼り付け...',
+  defaultText: 'こんにちは世界',
+  fontLabel: 'フォントファミリー',
+  sizeLabel: 'サイズ (px)',
+  weightLabel: '太さ',
+  italicLabel: '斜体',
+  widthLabel: '幅 (ピクセル)',
+  charsLabel: '文字数',
+  previewLabel: '視覚プレビュー',
+  copyBtn: '幅をコピー',
+  resetBtn: 'リセット',
+  copyDone: '幅をコピーしました',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'text-pixel-width-calculator',
+  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: 可変フォントについて', 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」の3倍以上のスペースを占めることがあります。文字数だけでは、テキストが実際に占める視覚的なスペースについては何もわかりません。',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Webデザイン：</strong>ボタン、ラベル、表のセルでのオーバーフローを防ぎます。',
+        '<strong>SEO：</strong>検索エンジンはタイトルを文字数ではなくピクセル単位で切り捨てます。',
+        '<strong>CanvasとPDF：</strong>プログラムでテキストを描画する前に正確な位置を計算します。',
+        '<strong>ツールチップと吹き出し：</strong>内部テキストに基づいてコンテナのサイズを動的に変更します。',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Canvasによる測定の仕組み' },
+    {
+      type: 'paragraph',
+      html: 'Canvas APIの<code>ctx.measureText()</code>メソッドは、現在アクティブなフォントを使用したCSSピクセル幅を反映する<code>width</code>プロパティを持つ<code>TextMetrics</code>オブジェクトを返します。このツールは、測定前にフォント、サイズ、太さ、スタイルを使用してコンテキストを設定します。',
+    },
+    {
+      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/ko.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: "대부분의 글꼴은 가변 너비(proportional)를 가지므로 각 문자마다 너비가 다릅니다. 예를 들어, 표준 산세리프 글꼴에서 대문자 '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: 'KRW' },
+  description: '글꼴, 크기 및 스타일에 따라 텍스트의 픽셀 너비를 정확하게 계산합니다.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: '측정할 텍스트',
+  textPlaceholder: '측정하려는 텍스트를 여기에 입력하거나 붙여넣으세요...',
+  defaultText: '안녕 세상',
+  fontLabel: '글꼴 모음',
+  sizeLabel: '크기 (px)',
+  weightLabel: '두께',
+  italicLabel: '기울임꼴',
+  widthLabel: '너비 (픽셀)',
+  charsLabel: '글자 수',
+  previewLabel: '시각적 미리보기',
+  copyBtn: '너비 복사',
+  resetBtn: '초기화',
+  copyDone: '너비가 복사되었습니다',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'text-pixel-width-calculator',
+  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: 가변 글꼴 이해하기', 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"보다 3배 더 많은 공간을 차지할 수 있습니다. 글자 수는 텍스트가 실제로 차지하는 시각적 공간에 대해 아무것도 알려주지 않습니다.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>웹 디자인:</strong> 버튼, 레이블 및 테이블 셀의 텍스트 넘침(overflow)을 방지합니다.',
+        '<strong>SEO:</strong> 검색 엔진은 글자 수가 아니라 픽셀 단위로 제목을 자릅니다.',
+        '<strong>Canvas 및 PDF:</strong> 프로그래밍 방식으로 텍스트를 그리기 전에 정확한 위치를 계산합니다.',
+        '<strong>툴팁 및 버블:</strong> 내부 텍스트에 따라 컨테이너 크기를 동적으로 조정합니다.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Canvas를 이용한 측정 방법' },
+    {
+      type: 'paragraph',
+      html: 'Canvas API의 <code>ctx.measureText()</code> 메서드는 현재 활성화된 글꼴을 사용하여 CSS 픽셀 너비를 반영하는 <code>width</code> 속성을 가진 <code>TextMetrics</code> 객체를 반환합니다. 이 도구는 측정 전에 글꼴, 크기, 두께 및 스타일로 컨텍스트를 구성합니다.',
+    },
+    {
+      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/nl.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: 'Hoe bereken ik online de pixelbreedte van tekst?',
+    answer: 'Plak uw tekst in het invoervak, configureer het lettertype en de grootte, en de tool gebruikt automatisch de Canvas API van de browser om de exacte breedte in pixels te retourneren.',
+  },
+  {
+    question: 'Waarom varieert de pixelbreedte tussen verschillende lettertypen?',
+    answer: "De meeste lettertypen zijn proportioneel, wat betekent dat elk teken een andere breedte heeft. Een hoofdletter 'M' is bijvoorbeeld altijd breder dan een kleine letter 'i' in een standaard sans-serif lettertype.",
+  },
+  {
+    question: 'Is het meten van tekens hetzelfde als het meten van pixels?',
+    answer: 'Nee. Het meten van tekens geeft u de lengte van de reeks, terwijl het meten van pixels u de visuele ruimte geeft die het inneemt. Dit is cruciaal om ervoor te zorgen dat tekst in een webontwerp niet buiten zijn container valt.',
+  },
+  {
+    question: 'Kan ik elk Google Fonts-lettertype gebruiken?',
+    answer: 'Ja, zolang het lettertype op uw besturingssysteem is geïnstalleerd of op de huidige pagina is geladen, zal de tool de afmetingen nauwkeurig meten.',
+  },
+  {
+    question: 'Is het veilig om privetekst of codefragmenten te verwerken?',
+    answer: 'Ja. De calculator werkt volledig lokaal. Er worden geen gegevens naar externe servers verzonden, wat volledige privacy voor uw projecten garandeert.',
+  },
+];
+
+const howToData = [
+  { name: 'Voer de tekst in', text: 'Typ of plak de tekst die u wilt meten in het invoerveld.' },
+  { name: 'Configureer het lettertype', text: 'Stel de lettertypefamilie, grootte in pixels, dikte in en of het cursief is.' },
+  { name: 'Lees het resultaat', text: 'De pixelbreedte en het aantal tekens worden in realtime bijgewerkt.' },
+  { name: 'Kopieer de waarde', text: 'Klik op "Breedte kopiëren" om het aantal pixels naar het klembord te kopiëren.' },
+];
+
+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: 'Hoe de tekstbreedte in pixels te meten',
+  step: howToData.map((s) => ({ '@type': 'HowToStep', name: s.name, text: s.text })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: 'Tekst Pixelbreedte Calculator',
+  applicationCategory: 'UtilitiesApplication',
+  operatingSystem: 'Web',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  description: 'Bereken nauwkeurig de pixelbreedte van elke tekst op basis van lettertype, grootte en stijl.',
+};
+
+const ui: TextPixelCalculatorUI = {
+  textLabel: 'Te meten tekst',
+  textPlaceholder: 'Typ of plak hier de tekst die u wilt meten...',
+  defaultText: 'Hallo Wereld',
+  fontLabel: 'Lettertypefamilie',
+  sizeLabel: 'Grootte (px)',
+  weightLabel: 'Dikte',
+  italicLabel: 'Cursief',
+  widthLabel: 'Breedte (pixels)',
+  charsLabel: 'Tekens',
+  previewLabel: 'Visueel voorbeeld',
+  copyBtn: 'Breedte kopiëren',
+  resetBtn: 'Resetten',
+  copyDone: 'Breedte gekopieerd',
+};
+
+export const content: ToolLocaleContent<TextPixelCalculatorUI> = {
+  slug: 'text-pixel-breedte-calculator',
+  title: 'Tekst Pixelbreedte Calculator',
+  description: 'Bereken nauwkeurig hoe breed een tekst in pixels is op basis van lettertype, grootte en stijl. Gratis tool voor ontwerpers en ontwikkelaars.',
+  ui,
+  faqTitle: 'Veelgestelde Vragen',
+  faq: faqData,
+  howTo: howToData,
+  bibliographyTitle: 'Referenties',
+  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: 'Meet de exacte pixelbreedte van elke tekst' },
+    {
+      type: 'paragraph',
+      html: 'Valt uw tekst buiten de container? Moet u weten hoeveel ruimte een kop inneemt voordat u deze rendert? De <strong>Canvas API van de browser</strong> stelt u in staat om de exacte breedte van elke tekstreeks met pixelprecisie te meten, zonder deze in de DOM te renderen.',
+    },
+    { type: 'title', level: 3, text: 'Waarom het tellen van tekens niet genoeg is' },
+    {
+      type: 'paragraph',
+      html: 'Moderne lettertypen zijn <strong>proportioneel</strong>: elk glyph heeft een andere breedte. Een "W" kan drie keer meer ruimte innemen dan een "i". Het aantal tekens zegt niets over de werkelijke visuele ruimte die de tekst inneemt.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Webontwerp:</strong> Voorkom overflow in knoppen, labels en tabelcellen.',
+        '<strong>SEO:</strong> Zoekmachines kappen titels af op basis van pixels, niet op basis van tekens.',
+        '<strong>Canvas en PDF:</strong> Bereken de exacte positie voordat u tekst programmatisch tekent.',
+        '<strong>Tooltips en bubbels:</strong> Pas de grootte van containers dynamisch aan op basis van de binnenste tekst.',
+      ],
+    },
+    { type: 'title', level: 3, text: 'Hoe meten met Canvas werkt' },
+    {
+      type: 'paragraph',
+      html: 'De methode <code>ctx.measureText()</code> van de Canvas API retourneert een <code>TextMetrics</code>-object met een <code>width</code>-eigenschap die de CSS-pixelbreedte weergeeft met het momenteel actieve lettertype. Deze tool configureert de context met uw lettertype, grootte, dikte en stijl voordat er wordt gemeten.',
+    },
+    {
+      type: 'code',
+      ariaLabel: 'Canvas measureText voorbeeld',
+      code: "const ctx = document.createElement('canvas').getContext('2d');\nctx.font = '700 16px Inter, system-ui, sans-serif';\nconst width = ctx.measureText('Hallo Wereld').width; // bijv. 74.5",
+    },
+    { type: 'title', level: 3, text: 'Privacy en lokale verwerking' },
+    {
+      type: 'paragraph',
+      html: 'Alle berekeningen vinden plaats in uw browser. Geen enkele tekst, codefragment of privégegevens verlaat uw apparaat.',
+    },
+    {
+      type: 'tip',
+      title: 'Google Fonts lettertypen',
+      html: 'Om een Google Fonts-lettertype nauwkeurig te meten, moet u er eerst voor zorgen dat het op de pagina is geladen of op uw systeem is geïnstalleerd. Anders valt de browser terug op een vervangend lettertype en zal het resultaat afwijken.',
+    },
+  ],
+};

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