@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/aspectRatio/i18n/sv.ts

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'bildforhallande-kalkylator';
+const title = 'Bildförhållande kalkylator i pixlar. Onlineproportioner';
+const description =
+  'Beräkna nya upplösningar för bilder, video och webbdesign och bibehåll exakta proportioner för att undvika förvrängd grafik. Stöder 16:9, 4:3, 21:9 och anpassade format.';
+
+const faqData = [
+  {
+    question: 'Vad är bildförhållande (Aspect Ratio)?',
+    answer:
+      'Bildförhållandet beskriver det geometriska förhållandet mellan bredden och höjden på en bild eller skärm. Det representeras med två siffror separerade av ett kolon (t.ex. 16:9), vilket anger hur höjden ändras proportionellt i förhållande till bredden.',
+  },
+  {
+    question: 'Varför är det viktigt att bibehålla korrekta proportioner?',
+    answer:
+      'Att ignorera bildförhållandet orsakar ihoptryckta eller utsträckta bilder, oväntade svarta kanter (letterboxing) i videor och webbkomponenter som tappar sin layout på olika skärmstorlekar. Att bibehålla korrekta proportioner är nyckeln till en professionell visning.',
+  },
+  {
+    question: 'Hur beräknar jag höjden från bredden med ett givet förhållande?',
+    answer:
+      'Formeln är: Höjd = Bredd × (Höjd i förhållandet / Bredd i förhållandet). Till exempel, för en bredd på 1280px med ett 16:9-förhållande blir höjden: 1280 × (9/16) = 720px.',
+  },
+  {
+    question: 'Vad är standard bildförhållande för YouTube-videor?',
+    answer:
+      '16:9 är standardförhållandet för YouTube och de flesta moderna videoplattformar. Det motsvarar upplösningar som 1280×720 (HD), 1920×1080 (Full HD) eller 3840×2160 (4K UHD).',
+  },
+  {
+    question: 'Vilket bildförhållande använder vertikala videor i sociala medier?',
+    answer:
+      '9:16, vilket är den exakta motsatsen till widescreen-formatet. Det är det nativa förhållandet för TikTok, Instagram Reels och YouTube Shorts, som har sitt ursprung i hur vi håller mobilen vertikalt.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Ange ursprungligt förhållande',
+    text: 'Ange bredd- och höjdvärdena för det förhållande du vill bibehålla (t.ex. 16 och 9 för widescreen) eller välj en av förinställningarna.',
+  },
+  {
+    name: 'Justera skalan',
+    text: 'Ändra bredd- eller höjdvärdet i avsnittet "Verklig skala". Verktyget beräknar automatiskt det motsatta värdet för att bibehålla proportionerna.',
+  },
+  {
+    name: 'Kontrollera förhandsgranskningen',
+    text: 'Förhandsgranskningspanelen visar den resulterande formen i proportionell skala, med det förenklade förhållandet och den beräknade upplösningen.',
+  },
+  {
+    name: 'Använd i ditt projekt',
+    text: 'Kopiera de beräknade värdena för att använda i din CSS (aspect-ratio: 16 / 9), vid videoexport eller i inställningarna för ditt designverktyg.',
+  },
+];
+
+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<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'sv',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Konfiguration',
+  labelRatio: 'Ursprungligt förhållande',
+  labelWidth: 'Bredd',
+  labelHeight: 'Höjd',
+  labelScale: 'Verklig skala',
+  labelPixelWidth: 'Pixlar (Bredd)',
+  labelPixelHeight: 'Pixlar (Höjd)',
+  labelPreview: 'Proportionell förhandsgranskning',
+  labelStatus: 'Perfekt förhållande',
+  labelOffline: '100 % offline-verktyg',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och dokumentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Aspect ratio',
+      url: 'https://sv.wikipedia.org/wiki/Bildförhållande',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Vad är bildförhållande?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Inom grafisk design, fotografi och frontend-utveckling beskriver <strong>bildförhållandet</strong> (Aspect Ratio) det geometriska förhållandet mellan bredden och höjden på en bild, skärm eller behållare. Det representeras vanligtvis med två siffror separerade av ett kolon (t.ex. <code>16:9</code>), vilket anger hur höjden ökar proportionellt i förhållande till dess bredd.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Felaktig hantering av bildförhållanden är en vanlig orsak till ihoptryckta fotografier, videor med oväntad beskärning (letterboxing) eller webbkomponenter som tappar sin layout när de visas på allt från mobiler till ultrabreda bildskärmar.',
+    },
+    {
+      type: 'title',
+      text: 'Vanliga branschförhållanden',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Beroende på din disciplin kommer du ständigt att hantera ett begränsat antal globala standardproportioner:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Widescreen):</strong> Det absolut dominerande formatet för moderna bildskärmar, TV-apparater, YouTube-inspelningar eller standard HD-upplösningar (som 1920×1080 eller 4K).',
+        '<strong>9:16 (Vertikalt):</strong> Har sitt ursprung i mobilanvändning (TikTok, Instagram Reels, YouTube Shorts). Exakt samma förhållande som widescreen-videor, men med en fysisk rotation av enheten.',
+        '<strong>4:3 (Klassiskt / Vintage):</strong> Finns i gamla TV-apparater och bildskärmar eller i analoga och specialiserade digitala kameramodeller. Dess något kvadratiska utseende drar blicken direkt till det centrala kompositionsplanet.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Webbutveckling och CSS-egenskapen aspect-ratio',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tidigare användes komplexa matematiska system i CSS med ett <strong>Padding Hack</strong> (som att injicera <code>padding-top: 56.25%</code>) för att reservera dynamiska utrymmen i YouTube-iframes eller omslagsbilder, för att undvika problem med Cumulative Layout Shift (CLS) vid sidladdning.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Numera tillämpar alla moderna layouter egenskaper som <code>aspect-ratio: 16 / 9;</code> direkt, vilket ger semantisk kod och låter webbläsaren automatiskt härleda den dimension som saknas från den ursprungliga bredden som definierats via Grid eller Flexbox.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Denna lokala pixelkalkylator överför designens kraft till en omedelbar skalningsberäkning som skyddar dina renderingar från förödande felkonfigurationer.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/tr.ts

@@ -0,0 +1,177 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'en-boy-orani-hesaplayici';
+const title = 'Piksel Cinsinden En Boy Oranı Hesaplayıcı. Çevrimiçi Oranlar';
+const description =
+  'Grafiklerin bozulmasını önlemek için tam oranı koruyarak yeni görüntü, video ve web tasarım çözünürlüklerini hesaplayın. 16:9, 4:3, 21:9 ve özel formatları destekler.';
+
+const faqData = [
+  {
+    question: 'En Boy Oranı (Aspect Ratio) Nedir?',
+    answer:
+      'En Boy Oranı, bir görüntünün veya ekranın genişliği ile yüksekliği arasındaki geometrik ilişkiyi tanımlar. İki sayının iki nokta üst üste ile ayrılmasıyla temsil edilir (örneğin 16:9) ve genişliğe bağlı olarak yüksekliğin orantılı olarak nasıl değiştiğini gösterir.',
+  },
+  {
+    question: 'Doğru oranları korumak neden önemlidir?',
+    answer:
+      'En Boy Oranı\'nın göz ardı edilmesi, basık veya gerilmiş görüntülere, videolarda beklenmedik siyah bantlara (letterboxing) ve farklı ekran boyutlarında düzeni bozulan web bileşenlerine neden olur. Doğru oranları korumak, profesyonel bir görünüm için anahtardır.',
+  },
+  {
+    question: 'Belirli bir oranla genişlikten yükseklik nasıl hesaplanır?',
+    answer:
+      'Formül şöyledir: Yükseklik = Genişlik × (Oran Yüksekliği / Oran Genişliği). Örneğin, 16:9 oranına sahip 1280 piksel genişlik için yükseklik şöyle olacaktır: 1280 × (9/16) = 720 piksel.',
+  },
+  {
+    question: 'YouTube videoları için standart En Boy Oranı nedir?',
+    answer:
+      '16:9, YouTube ve çoğu modern video platformu için standart orandır. 1280×720 (HD), 1920×1080 (Full HD) veya 3840×2160 (4K UHD) gibi çözünürlüklere karşılık gelir.',
+  },
+  {
+    question: 'Dikey sosyal medya videoları hangi En Boy Oranını kullanır?',
+    answer:
+      '9:16, geniş ekran formatının tam tersidir. TikTok, Instagram Reels ve YouTube Shorts\'un yerel oranıdır ve içeriğin dikey tutulan bir cep telefonunda tüketilmesinden kaynaklanır.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Orijinal oranı girin',
+    text: 'Korumak istediğiniz oranın genişlik ve yükseklik değerlerini girin (örneğin geniş ekran için 16 ve 9) veya hazır ayarlardan birini seçin.',
+  },
+  {
+    name: 'Ölçeği ayarlayın',
+    text: '"Gerçek Ölçek" bölümünde genişlik veya yükseklik değerini değiştirin. Araç, oranı korumak için karşı değeri otomatik olarak hesaplayacaktır.',
+  },
+  {
+    name: 'Önizlemeyi kontrol edin',
+    text: 'Önizleme paneli, basitleştirilmiş oran ve hesaplanan çözünürlükle birlikte ortaya çıkan şekli orantılı ölçekte gösterir.',
+  },
+  {
+    name: 'Projenizde uygulayın',
+    text: 'CSS\'inizde (aspect-ratio: 16 / 9), video dışa aktarımında veya tasarım aracınızın ayarlarında kullanmak üzere hesaplanan değerleri kopyalayı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<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'tr',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: 'Yapılandırma',
+  labelRatio: 'Orijinal Oran',
+  labelWidth: 'Genişlik',
+  labelHeight: 'Yükseklik',
+  labelScale: 'Gerçek Ölçek',
+  labelPixelWidth: 'Piksel (Genişlik)',
+  labelPixelHeight: 'Piksel (Yükseklik)',
+  labelPreview: 'Orantılı Önizleme',
+  labelStatus: 'Mükemmel Oran',
+  labelOffline: '%100 Çevrimdışı Araç',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Sıkça Sorulan Sorular',
+  faq: faqData,
+  bibliographyTitle: 'Referanslar ve Belgeler',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Aspect ratio',
+      url: 'https://tr.wikipedia.org/wiki/Görüntü_oranı',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'En Boy Oranı Nedir?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Grafik tasarım, fotoğrafçılık ve frontend geliştirmede <strong>En Boy Oranı</strong> (Aspect Ratio), bir görüntünün, ekranın veya kapsayıcının genişliği ile yüksekliği arasındaki geometrik ilişkiyi tanımlar. Tipik olarak iki noktalı bir sayı dizisiyle temsil edilir (örneğin <code>16:9</code>) ve genişliğe yanıt olarak yüksekliğin orantılı olarak nasıl arttığını gösterir.',
+    },
+    {
+      type: 'paragraph',
+      html: 'En boy oranlarının yanlış yönetilmesi; basık fotoğrafların, beklenmedik kırpılmalı videoların (letterboxing) veya mobilden ultra geniş monitörlere kadar farklı cihazlarda düzeni bozulan web bileşenlerinin yaygın bir nedenidir.',
+    },
+    {
+      type: 'title',
+      text: 'Sektördeki Yaygın Oranlar',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Disiplininize bağlı olarak, sınırlı sayıda küresel standart oranla sürekli olarak karşılaşacaksınız:',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9 (Geniş Ekran):</strong> Modern monitörler, TV\'ler, YouTube kayıtları veya standart yüksek çözünürlüklü (1920×1080 veya 4K gibi) çözünürlükler için mutlak hakim formattır.',
+        '<strong>9:16 (Dikey):</strong> Yerel mobil içerik tüketiminden (TikTok, Instagram Reels, YouTube Shorts) kaynaklanmıştır. Geniş ekran videolarla tam olarak aynı orandır, ancak cihazın fiziksel olarak döndürülmesiyle oluşur.',
+        '<strong>4:3 (Klasik / Nostaljik):</strong> Eski televizyonlarda ve monitörlerde veya analog ve özel dijital kamera modellerinde bulunur. Hafif kare görünümü dikkati doğrudan merkezi kompozisyon eksenine çeker.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Web Geliştirme ve CSS aspect-ratio Özelliği',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Eskiden CSS\'de, sayfa yüklenirken korkunç Kümülatif Düzen Kaymasını (CLS) önlemek amacıyla YouTube iframe\'leri veya kapak görselleri için dinamik alanlar ayırmak için <strong>Padding Hack</strong> (örneğin <code>padding-top: %56,25</code> eklemek gibi) kullanan karmaşık matematiksel sistemler kullanılıyordu.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Günümüzde tüm modern düzenler <code>aspect-ratio: 16 / 9;</code> gibi özellikleri doğrudan uygulayarak semantik kod sağlar ve tarayıcının Grid veya Flexbox aracılığıyla tanımlanan orijinal genişlikten eksik boyutu otomatik olarak türetmesine olanak tanır.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Bu yerel piksel hesaplayıcı, tasarım gücünü anında ölçeklendirme hesaplamasına aktararak çıktılarınızı feci yanlış yapılandırmalardan koruyacaktır.',
+    },
+  ],
+};

package/src/tool/aspectRatio/i18n/zh.ts

@@ -0,0 +1,178 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { AspectRatioUI } from '../ui';
+
+const slug = 'aspect-ratio-calculator';
+const title = '像素宽高比计算器。在线比例换算';
+const description =
+  '计算新的图像、视频和网页设计分辨率，同时保持精确的比例，避免图形失真。支持 16:9、4:3、21:9 和自定义格式。';
+
+const faqData = [
+  {
+    question: '什么是宽高比（Aspect Ratio）？',
+    answer:
+      '宽高比描述了图像或屏幕宽度与高度之间的几何关系。它通常用冒号分隔的两个数字表示（如 16:9），显示高度随宽度按比例变化的方式。',
+  },
+  {
+    question: '为什么保持正确比例很重要？',
+    answer:
+      '忽视宽高比会导致图像被压缩或拉伸、视频中出现意外的黑边（letterboxing），以及网页组件在不同屏幕尺寸下布局错乱。保持正确的比例是专业展示的关键。',
+  },
+  {
+    question: '如何根据给定比例通过宽度计算高度？',
+    answer:
+      '计算公式为：高度 = 宽度 × (比例高度 / 比例宽度)。例如，宽度为 1280px 且比例为 16:9 时，高度为：1280 × (9/16) = 720px。',
+  },
+  {
+    question: 'YouTube 视频的标准宽高比是多少？',
+    answer:
+      '16:9 是 YouTube 和大多数现代视频平台的标准比例。它对应于 1280×720 (HD)、1920×1080 (Full HD) 或 3840×2160 (4K UHD) 等分辨率。',
+  },
+  {
+    question: '垂直社交媒体视频使用什么宽高比？',
+    answer:
+      '9:16，这恰好是宽屏格式的反转。它是 TikTok、Instagram Reels 和 YouTube Shorts 的原生比例，源于用户垂直握持手机观看内容。',
+  },
+];
+
+const howToData = [
+  {
+    name: '输入原始比例',
+    text: '输入您想要保持的比例的宽度和高度值（例如宽屏输入 16 和 9），或者选择一个预设。',
+  },
+  {
+    name: '调整缩放',
+    text: '在“实际缩放”部分更改宽度或高度值。工具将自动计算对应的数值以保持比例。',
+  },
+  {
+    name: '查看预览',
+    text: '预览面板以等比例展示结果形状，并附带简化的比例和计算出的分辨率。',
+  },
+  {
+    name: '应用到项目中',
+    text: '复制计算出的数值，用于您的 CSS (aspect-ratio: 16 / 9)、视频导出或设计工具的设置中。',
+  },
+];
+
+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<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'zh',
+};
+
+const ui: AspectRatioUI = {
+  labelConfig: '配置',
+  labelRatio: '原始比例',
+  labelWidth: '宽度',
+  labelHeight: '高度',
+  labelScale: '实际缩放',
+  labelPixelWidth: '像素（宽）',
+  labelPixelHeight: '像素（高）',
+  labelPreview: '等比预览',
+  labelStatus: '完美比例',
+  labelOffline: '100% 离线工具',
+};
+
+export const content: ToolLocaleContent<AspectRatioUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '常见问题',
+  faq: faqData,
+  bibliographyTitle: '参考资料与文档',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: aspect-ratio (CSS)',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio',
+    },
+    {
+      name: 'Wikipedia: Aspect ratio',
+      url: 'https://zh.wikipedia.org/wiki/宽高比',
+    },
+    {
+      name: 'W3C: CSS Box Sizing Level 4',
+      url: 'https://www.w3.org/TR/css-sizing-4/#aspect-ratio',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '什么是宽高比？',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '在图形设计、摄影和前端开发中，<strong>宽高比</strong>（Aspect Ratio）描述了图像、屏幕或容器宽度与高度之间的几何关系。它通常用冒号分隔的两个数字表示（如 <code>16:9</code>），显示高度如何随宽度成比例增加。',
+    },
+    {
+      type: 'paragraph',
+      html: '宽高比处理不当是导致照片被压缩、视频出现意外裁剪（黑边）或网页组件在从手机到超宽显示器等不同设备上显示错乱的常见原因。',
+    },
+    {
+      type: 'title',
+      text: '行业常用比例',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '根据您的专业领域，您会经常接触到一些全球标准比例：',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>16:9（宽屏）：</strong> 现代显示器、电视、YouTube 录制或标准高清分辨率（如 1920×1080 或 4K）的绝对主流格式。',
+        '<strong>9:16（垂直）：</strong> 源自移动端的原生内容消费（TikTok、Instagram Reels、YouTube Shorts）。与宽屏视频比例完全相同，但设备处于物理旋转状态。',
+        '<strong>4:3（经典 / 复古）：</strong> 见于旧电视和显示器，或者某些模拟及专用数字相机。其接近正方形的外观将注意力直接吸引到构图的中心轴上。',
+      ],
+    },
+    {
+      type: 'title',
+      text: '网页开发与 CSS aspect-ratio 属性',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '以前在 CSS 中，为了避免页面加载时严重的内容偏移（CLS），开发者不得不使用 <strong>Padding Hack</strong>（例如设置 <code>padding-top: 56.25%</code>）等复杂的数学方法来为 YouTube iframe 或封面图预留动态空间。',
+    },
+    {
+      type: 'paragraph',
+      html: '如今，所有现代布局都直接应用 <code>aspect-ratio: 16 / 9;</code> 等属性，从而实现语义化代码，并允许浏览器根据 Grid 或 Flexbox 定义的原始宽度自动推导出缺失的维度。',
+    },
+    {
+      type: 'paragraph',
+      html: '此本地像素计算器将设计决策权交给即时缩放计算，从而保护您的渲染效果免受灾难性配置错误的影响。',
+    },
+  ],
+};
+

package/src/tool/aspectRatio/index.ts

@@ -7,10 +7,6 @@ import type { AspectRatioUI } from './ui';
 
 export type AspectRatioLocaleContent = ToolLocaleContent<AspectRatioUI>;
 
-import { content as es } from './i18n/es';
-import { content as en } from './i18n/en';
-import { content as fr } from './i18n/fr';
-
 export const aspectRatio: DeveloperToolEntry<AspectRatioUI> = {
   id: 'aspect-ratio',
   icons: {
@@ -18,9 +14,21 @@ export const aspectRatio: DeveloperToolEntry<AspectRatioUI> = {
     fg: 'mdi:resize',
   },
   i18n: {
-    es: async () => es,
-    en: async () => en,
-    fr: async () => fr,
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
   },
 };