capsize

Capsize يجعل تحجيم وتخطيط النص يمكن التنبؤ به مثل كل عنصر آخر على الشاشة.

باستخدام بيانات تعريف الخط ، يمكن الآن حجم النص وفقًا لارتفاع رسائل رأسها مع تقليص المساحة فوق الحروف الرأسمالية وتحت خط الأساس.

npm install @capsizecss/core

• الاستخدام
  • CreateStyleObject
  • المبدع
• خيارات
  • حجم النص
  • ارتفاع الخط
  • مقاييس الخط
• جوهر
  • CreateFontStack
    • الاستخدام في ورقة الأنماط CSS
    • الاستخدام مع أطر CSS-in-JS
    • خصائص إضافية font-face
  • قابلة للتأثير
  • getCapheight
• المقاييس
• فك
• التكامل
  • الفانيليا-الاستكشاف

الاستخدام

createStyleObject

إرجاع كائن نمط CSS-in-JS.

1. استيراد createStyleObject تمرير الخيارات ذات الصلة.

 import { createStyleObject } from '@capsizecss/core' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : {
    capHeight : 700 ,
    ascent : 1058 ,
    descent : - 291 ,
    lineGap : 0 ,
    unitsPerEm : 1000 ,
  } ,
} ) ;

ملاحظة: يوصى بتثبيت حزمة @CapsizeCSS/Metrics واستيراد المقاييس من هناك:

 import { createStyleObject } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizeStyles = createStyleObject ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

راجع خيار FontMetrics الموثق أدناه لمزيد من الطرق للحصول على هذه المقاييس.

2. قم بتطبيق الأنماط على عنصر النص ، على سبيل المثال عبر Prop css .

 < div
  css = { {
    // fontFamily: '...' etc,
    ... capsizeStyles ,
  } }
>
  My capsized text ?
< / div>

️ ملاحظة: لا ينصح بتطبيق المزيد من الأنماط المتعلقة بالتخطيط على نفس العنصر ، لأن هذا سيخاطر بالتداخل مع الأنماط المستخدمة في القطع. بدلاً من ذلك ، فكر في استخدام عنصر متداخل.

createStyleString

إرجاع سلسلة CSS التي يمكن إدراجها في علامة style أو إلحاق ورقة الأنماط.

1. استيراد createStyleString تمرير الخيارات ذات الصلة.

 import { createStyleString } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizedStyleRule = createStyleString ( 'capsizedText' , {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

2. أضف الأنماط إلى ورقة الأنماط أو عنصر style وتطبيق اسم الفئة المحدد.

 document . write ( `
  <style type="text/css">
    ${ capsizedStyleRule }
  </style>
  <div class="capsizedText">
    My capsized text ?
  </div>
` ) ;

️ ملاحظة: لا ينصح بتطبيق المزيد من الأنماط المتعلقة بالتخطيط على نفس العنصر ، لأن هذا سيخاطر بالتداخل مع الأنماط المستخدمة في القطع. بدلاً من ذلك ، فكر في استخدام عنصر متداخل.

خيارات

حجم النص

يدعم Capsize طريقتين لتحديد حجم النص ، capHeight و fontSize .

ملاحظة: يجب عليك فقط تمرير واحد أو آخر ، وليس كلاهما.

capHeight: <number>

يحدد ارتفاع الحروف الرأسمالية على القيمة المحددة. إن تحديد الطباعة بهذه الطريقة يجعل المحاذاة مع شبكة أو مع عناصر أخرى ، مثل الرموز ، نسيم.

fontSize: <number>

يتيح لك ضبط حجم الخط الحصول على جميع فوائد تقليص المساحة البيضاء ، مع الاستمرار في تحديد font-size الصريح للنص الخاص بك. يمكن أن يكون هذا مفيدًا عند الحاجة لمطابقة مواصفات التصميم الخرسانية أو تركيب منتج موجود.

ارتفاع الخط

يدعم Capsize نموذجين عقليين لتحديد ارتفاع الخط ، lineGap leading . إذا قمت بتمرير النص ، فسيتابع النص التباعد الافتراضي للخط المحدد ، على سبيل المثال line-height: normal .

ملاحظة: يجب عليك فقط تمرير واحد أو آخر ، وليس كلاهما.

lineGap: <number>

يحدد عدد البكسلات بين الخطوط ، كما تم قياسه بين خط الأساس وارتفاع الغطاء للخط التالي.

leading: <number>

يضبط ارتفاع الخط على القيمة المقدمة كما تم قياسها من خط الأساس للنص. هذا يتوافق مع الويب مع كيفية التعامل مع الطباعة في أدوات التصميم.

مقاييس الخط

يتم استخراج هذه البيانات الوصفية من جداول المقاييس داخل الخط نفسه. هناك عدد من الطرق للعثور على هذه المعلومات:

• في حالة استخدام خط Google أو خط النظام ، قم بتثبيت حزمة @CapsizeCSS/Metrics واستيراد المقاييس حسب الاسم. على سبيل المثال:

   import arialMetrics from '@capsizecss/metrics/arial' ;

• إذا كنت تستخدم خطًا من ملف ، فقم بتثبيت حزمة @capsizecss/unpack واستخراج المقاييس من ملف الخط مباشرة. على سبيل المثال:

   import { fromFile } from '@capsizecss/unpack' ;
  
  const metrics = await fromFile ( filePath ) ;

• أو ، استخدم موقع الويب Capsize للعثور على هذه الخطوط من خلال تحديد خط والرجوع إلى علامة تبويب Metrics في الخطوة 3.

جوهر

توفر الحزمة الأساسية أيضًا بعض الميزات القائمة على المقاييس الأخرى لتحسين الطباعة على الويب:

CreateFontStack

يخلق إعلانات @font-face المستندة إلى المقاييس لتحسين محاذاة عطلات عائلة الخطوط ، والتي يمكن أن تحسن بشكل كبير من مقياس التحول التراكمي للمواقع التي تعتمد على خط الويب.

الاستخدام

ضع في اعتبارك المثال التالي ، حيث يكون خط الويب المطلوب هو سرطان البحر ، ويعود إلى Helvetica Neue ثم Arial ، على سبيل المثال font-family: Lobster, 'Helvetica Neue', Arial .

1. استيراد createFontStack من الحزمة الأساسية:

 import { createFontStack } from '@capsizecss/core' ;

2. استيراد مقاييس الخط لكل من الخطوط المطلوبة (انظر مقاييس الخط أعلاه):

 import lobster from '@capsizecss/metrics/lobster' ;
import helveticaNeue from '@capsizecss/metrics/helveticaNeue' ;
import arial from '@capsizecss/metrics/arial' ;

3. قم بإنشاء مكدس الخط الخاص بك تمرير المقاييس كصفيف ، باستخدام نفس الترتيب كما تفعل عبر خاصية CSS font-family .

 const { fontFamily , fontFaces } = createFontStack ( [
  lobster ,
  helveticaNeue ,
  arial ,
] ) ;

تحتوي القيمة التي تم إرجاعها على إعلانات Font Face التي تم إنشاؤها وكذلك fontFamily المحسوبة مع الأسماء المستعارة الخطية المطلوبة بشكل مناسب.

الاستخدام في ورقة الأنماط CSS أو علامة نمط

يمكن أن تُنسم القيم التي تم إرجاعها إلى ورقة أنماط أو كتلة style . فيما يلي قالب المقاود:

 < style type =" text/css " >
  .heading {
    font-family: {{ fontFamily }}
  }

  {{ fontFaces }}
</ style >

سيؤدي هذا إلى إنتاج CSS التالي:

. heading {
  font-family : Lobster , 'Lobster Fallback: Helvetica Neue' ,
    'Lobster Fallback: Arial' , 'Helvetica Neue' , Arial;
}

@font-face {
  font-family : 'Lobster Fallback: Helvetica Neue' ;
  src : local ( 'Helvetica Neue' );
  ascent-override : 115.1741 % ;
  descent-override : 28.7935 % ;
  size-adjust : 86.8251 % ;
}
@font-face {
  font-family : 'Lobster Fallback: Arial' ;
  src : local ( 'Arial' );
  ascent-override : 113.5679 % ;
  descent-override : 28.392 % ;
  size-adjust : 88.053 % ;
}

الاستخدام مع أطر CSS-in-JS

إذا كنت تعمل مع مكتبة CSS-in-JS ، فيمكن توفير fontFaces التي تم إرجاعها ككائن نمط JavaScript من خلال توفير styleObject كخيار fontFaceFormat .

هنا مثال باستخدام العاطفة:

 import { Global } from '@emotion/core' ;

const { fontFaces , fontFamily } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceFormat : 'styleObject' ,
  } ,
) ;

export const App = ( ) => (
  < >
    < Global styles = { fontFaces } / >
    < p css = { { fontFamily } } > ... < / p >
  < / >
) ;

مفيد أيضًا كمصدر لمزيد من التلاعب بالنظر إلى أنه هيكل بيانات يمكن تكراره أو تمديده.

توفير خصائص إضافية font-face

يمكن إضافة خصائص إضافية إلى إعلانات @font-face التي تم إنشاؤها عبر خيار fontFaceProperties :

 const { fontFamily , fontFaces } = createFontStack (
  [ lobster , helveticaNeue , arial ] ,
  {
    fontFaceProperties : {
      fontDisplay : 'swap' ,
    } ,
  } ,
) ;

سيؤدي هذا إلى الإضافات التالية إلى الإعلانات:

 @font-face {
   font-family: 'Lobster Fallback: Helvetica Neue';
   src: local('Helvetica Neue');
   ascent-override: 115.1741%;
   descent-override: 28.7935%;
   size-adjust: 86.8251%;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Lobster Fallback: Arial';
   src: local('Arial');
   ascent-override: 113.5679%;
   descent-override: 28.392%;
   size-adjust: 88.053%;
+  font-display: swap;
 }

ملحوظة

سيتم تجاهل تمرير أي من خصائص CSS المتطورة المترية لأنها محسوبة عن طريق الانقلاب. ومع ذلك ، يتم قبول خاصية size-adjust لدعم ضبط التجاوز لحالات الاستخدام المعينة. يمكن استخدام هذا لبراعة التعديل لنص معين ، أو لتعطيل التعديل عن طريق ضبطه على 100% .

التحجيم لمجموعات فرعية مختلفة

بالنسبة لللغات التي تستخدم مجموعات فرعية مختلفة من Unicode ، على سبيل المثال Thai ، يجب تحجيم الاحتياطات وفقًا لذلك ، حيث يعتمد التحجيم على تردد الشخصية في اللغة المكتوبة.

يمكن إنشاء مكدس خط عكسي لمجموعة فرعية مدعومة من خلال تحديد subset كخيار:

 const { fontFamily , fontFaces } = createFontStack ( [ lobster , arial ] , {
  subset : 'thai' ,
} ) ; 

نصيحة

هل تحتاج إلى دعم لمجموعة مختلفة من Unicode؟ إما إنشاء مشكلة أو اتبع الخطوات الموضحة في البرنامج النصي generate-weightings وفتح العلاقات العامة.

قابلة للتأثير

إرجاع جميع المعلومات المطلوبة لإنشاء أنماط تقليم رائدة لحجم خط معين بالنظر إلى مقاييس الخط المقدمة. هذا مفيد للتكامل مع حلول التصميم المختلفة.

يقبل نفس الخيارات مثل CreateStyleObject و CreatestyleString.

 import { precomputeValues } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const capsizeValues = precomputeValues ( {
  fontSize : 16 ,
  leading : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

// => {
//  fontSize: string,
//  lineHeight: string,
//  capHeightTrim: string,
//  baselineTrim: string,
//}

getCapheight

إرجاع ارتفاع الغطاء المقدم لحجم خط معين بالنظر إلى مقاييس الخط المقدمة.

 import { getCapHeight } from '@capsizecss/core' ;
import arialMetrics from '@capsizecss/metrics/arial' ;

const actualCapHeight = getCapHeight ( {
  fontSize : 24 ,
  fontMetrics : arialMetrics ,
} ) ;

// => number 

المقاييس

لجعل استرجاع مقاييس الخطوط سهلة ، يوفر Capsize حزمة @capsizecss/metrics التي تحتوي على جميع البيانات المطلوبة لكل من خطوط النظام و Google.

npm install @capsizecss/metrics

انظر الحزمة للوثائق.

فك

إذا كنت تستخدم خطًا مخصصًا أو لا يتم تضمينه في حزمة @capsizecss/metrics ، فإن Capsize يوفر حزمة @capsizecss/unpack لاستخراج البيانات المطلوبة إما عبر عنوان URL أو من ملف محلي.

npm install @capsizecss/unpack

انظر الحزمة للوثائق.

التكامل

• تكامل الفانيليا عبر @capsizeCSS/الفانيليا-الاستخراج

شكرًا

• Vincent de Oliveira لكتابة CSS الغوص العميق: مقاييس الخطوط ، والخطوط والرأسية المحاذاة ، والتي وفرت البحث اللازم لبناء كل هذا.
• Devon Govett لإنشاء Fontkit ، الذي يقوم بكل الرفع الثقيل لاستخراج مقاييس الخط تحت الأغطية.
• ابحث عن منحنا مساحة للقيام بعمل مثير للاهتمام.

رخصة

معهد ماساتشوستس للتكنولوجيا.