الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

❧ رد الفعل typesetting ☙

تفاعل مكونات لإنشاء تصاميم أنواع جميلة.

تجريبي!

️ هذا المشروع تجريبي للغاية. استخدم على مسؤوليتك الخاصة!

جدول المحتويات

  • عناصر
    • تضيق
      • الدعائم
    • PreventWidows
      • الدعائم
    • يبرر
      • الدعائم
    • fontobserver
      • الدعائم
    • fontobserver.provider
      • الدعائم
    • typeetting.provider
      • الدعائم

عناصر

تضيق 

 import { TightenText } from 'react-typesetting' ;

يشدد word-spacing ، letter-spacing ، font-size (بهذا الترتيب) حسب الحد الأدنى للمبلغ اللازم لضمان الحد الأدنى من الخطوط ملفوفة وتغلبه.

تبدأ الخوارزمية بتعيين الحد الأدنى لجميع القيم (المحددة من قبل minWordSpacing و minLetterSpacing و minFontSize Props) لتحديد ما إذا كان ضبطها سيؤدي إلى عدد أقل من الخطوط المغلفة أو تدفق أقل. إذا كان الأمر كذلك ، فسيتم إجراء بحث ثنائي (مع معظم maxIterations ) للعثور على أفضل ملاءمة.

افتراضيًا ، يتم اكتشاف تغييرات العناصر التي قد تتطلب إعادة تجديد النص تلقائيًا. من خلال تحديد دعامة reflowKey ، يمكنك بدلاً من ذلك أخذ التحكم اليدوي عن طريق تغيير الدعامة كلما ترغب في تحديث المكون.

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

الدعائم

اسم يكتب تقصير وصف
اسم الفصل خيط

الفئة لتطبيقها على span الخارجي المغطى الذي أنشأه هذا المكون.

أسلوب هدف

خصائص نمط إضافية لإضافتها إلى span الغلاف الخارجي الذي تم إنشاؤه بواسطة هذا المكون.

أطفال العقدة

المحتوى لتقديمه.

MinWordspacing رقم -0.02

الحد الأدنى تباعد الكلمات في EMS. اضبط هذا على 0 إذا كان لا ينبغي ضبط تباعد الكلمات.

minletterspacing رقم -0.02

الحد الأدنى تباعد الرسالة في EMS. اضبط هذا على 0 إذا كان لا ينبغي ضبط تباعد الكلمات.

minfontsize رقم 0.97

الحد الأدنى font-size في EMS. اضبط هذا على 1 إذا كان لا ينبغي ضبط حجم الخط.

MAXITERATIONS رقم 5

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

reprowkey واحد من ...
رقم
خيط

إذا تم تحديده ، فإن تعطيل التراجع التلقائي بحيث يمكنك تشغيله يدويًا عن طريق تغيير هذه القيمة. الدعامة نفسها لا تفعل شيئًا ، لكن تغييره سيؤدي إلى رد فعل على تحديث المكون.

revowtimeout رقم

Debounces تنزلق بحيث تحدث في معظم الأحيان في غالبًا بالميلي ثانية (في نهاية المدة المحددة). إذا لم يتم تحديده ، يتم حساب التراجع في كل مرة يتم فيها تقديم المكون.

عاجز منطقية

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

onreflow وظيفة

دالة للاتصال عند إعادة حساب التخطيط ويتم إعادة النص.

مسبقًا خيط

اسم الإعداد المسبق المحدد في مكون Typesetting.Provider . إذا كانت موجودة ، فستأتي القيم الافتراضية لجميع الدعائم الأخرى من الإعداد المسبق المحدد.

PreventWidows 

 import { PreventWidows } from 'react-typesetting' ;

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

بشكل افتراضي ، يتم اكتشاف تغييرات العناصر التي قد تتطلب إعادة حساب عرض خط الخط تلقائيًا. من خلال تحديد دعامة reflowKey ، يمكنك بدلاً من ذلك أخذ التحكم اليدوي عن طريق تغيير الدعامة كلما ترغب في تحديث المكون.

الدعائم

اسم يكتب تقصير وصف
اسم الفصل خيط

الفئة لتطبيقها على span الخارجي المغطى الذي أنشأه هذا المكون.

أسلوب هدف

خصائص نمط إضافية لإضافتها إلى span الغلاف الخارجي الذي تم إنشاؤه بواسطة هذا المكون.

أطفال العقدة

المحتوى لتقديمه.

MaxSubStitates رقم 3

الحد الأقصى لعدد المساحات للاستبدال.

MinlineWidth واحد من ...
رقم
خيط
وظيفة		 15 ٪

الحد الأدنى لعرض السطر الأخير ، الذي سيتم إدراج مساحات غير متجانسة أدناه حتى يتم استيفاء الحد الأدنى.

  • تشير الأرقام إلى عرض البكسل المطلق.
  • تشير الأوتار إلى قيمة width CSS التي سيتم حسابها عن طريق حقن عنصر مؤقتًا في الحاوية وتحديد عرضه.
  • سيتم استدعاء الوظائف مع البيانات ذات الصلة لتحديد رقم ديناميكي أو قيمة سلسلة للعودة. يمكن استخدام ذلك ، على سبيل المثال ، للحصول على قواعد مختلفة في نقاط توقف مختلفة - مثل استعلام الوسائط.
nbspchar واحد من ...
خيط
رد فعل العنصر
وظيفة		 u00A0

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

  • سيتم إدخال قيم السلسلة مباشرة في عقدة النص الموجودة التي تحتوي على المساحة.
  • سيتم تقديم قيم عنصر React في عقدة "حاضنة" في الذاكرة ، ثم يتم زرعها في DOM ، وتقسيم العقدة النصية التي تم العثور على المساحة.
  • يجب أن تنتج قيم الوظائف سلسلة أو عقدة نصية أو عنصر عنصر أو عنصر رد فعل لإدراجها.
reprowkey واحد من ...
رقم
خيط

إذا تم تحديده ، فإن تعطيل التراجع التلقائي بحيث يمكنك تشغيله يدويًا عن طريق تغيير هذه القيمة. الدعامة نفسها لا تفعل شيئًا ، لكن تغييره سيؤدي إلى رد فعل على تحديث المكون.

revowtimeout رقم

Debounces تنزلق بحيث تحدث في معظم الأحيان في غالبًا بالميلي ثانية (في نهاية المدة المحددة). إذا لم يتم تحديده ، يتم حساب التراجع في كل مرة يتم فيها تقديم المكون.

عاجز منطقية

سواء كنت تعطيل الوقاية من الأرملة بالكامل.

onreflow وظيفة

وظيفة للاتصال عند إعادة حساب التصميم وإجراء استبدال الفضاء.

مسبقًا خيط

اسم الإعداد المسبق المحدد في مكون Typesetting.Provider . إذا كانت موجودة ، فستأتي القيم الافتراضية لجميع الدعائم الأخرى من الإعداد المسبق المحدد.

يبرر 

 import { Justify } from 'react-typesetting' ;

على الرغم من أن هذا قد يتضمن ميزات تبرير أكثر تقدمًا في المستقبل ، إلا أنها بسيطة للغاية: فهي تنطبق بشكل مشروط على text-align: justify لعنصر الحاوية الخاص به (A <p> افتراضيًا) اعتمادًا على ما إذا كانت هناك مساحة كافية لتجنب الفجوات الكبيرة غير المليئة بالألوان. يتم تعريف الحد الأدنى للعرض بواسطة minWidth والافتراضات إلى 16 EMS.

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

الدعائم

اسم يكتب تقصير وصف
اسم الفصل خيط

الفصل للتطبيق على عنصر الغلاف الخارجي الذي أنشأه هذا المكون.

أسلوب هدف

خصائص نمط إضافية لإضافتها إلى عنصر الغلاف الخارجي الذي تم إنشاؤه بواسطة هذا المكون.

أطفال العقدة

المحتوى لتقديمه.

مثل واحد من ...
خيط
وظيفة
هدف		 ص

نوع العنصر الذي يجعل الأطفال الموردين. يجب أن يكون عنصر مستوى الكتلة ، مثل p أو div ، نظرًا لأن text-align ليس له أي تأثير على العناصر المضمنة. قد يكون أيضًا مكون رد فعل مخصص ، طالما أنه يستخدم forwardRef .

Minwidth واحد من ...
رقم
خيط		 16em

الحد الأدنى للعرض الذي يسمح عنده النص المبرر. تشير الأرقام إلى عرض البكسل المطلق. سيتم تطبيق السلاسل على CSS لعنصر من أجل إجراء حساب العرض.

inialjustify منطقية حقيقي

سواء أكان سيعين في البداية text-align: justify قبل تحديد العرض المتاح.

reprowkey واحد من ...
رقم
خيط

إذا تم تحديده ، فإن تعطيل التراجع التلقائي بحيث يمكنك تشغيله يدويًا عن طريق تغيير هذه القيمة. الدعامة نفسها لا تفعل شيئًا ، لكن تغييره سيؤدي إلى رد فعل على تحديث المكون.

revowtimeout رقم

Debounces تنزلق بحيث تحدث في معظم الأحيان في غالبًا بالميلي ثانية (في نهاية المدة المحددة). إذا لم يتم تحديده ، يتم حساب التراجع في كل مرة يتم فيها تقديم المكون.

عاجز منطقية

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

onreflow وظيفة

دالة للاتصال عند إعادة حساب التخطيط وتم تطبيق المبررات أو عدم ملائمة.

مسبقًا خيط

اسم الإعداد المسبق المحدد في مكون Typesetting.Provider . إذا كانت موجودة ، فستأتي القيم الافتراضية لجميع الدعائم الأخرى من الإعداد المسبق المحدد.

fontobserver 

 import { FontObserver } from 'react-typesetting' ;

مكون لمراقبة الخطوط المحددة في مكون FontObserver.Provider .

الدعائم

اسم يكتب تقصير وصف
أطفال وظيفة

وظيفة ستتلقى الوضع الحالي للخطوط المرصودة. ستكون الوسيطة كائنًا مع هذه الخصائص:

  • fonts : تم تمرير مجموعة من الخطوط إلى FontObserver.Provider ، ولكل منها خاصية loaded error .
  • loaded : ما إذا كانت جميع الخطوط المرصودة يتم تحميلها.
  • error : إذا فشلت أي خطوط في التحميل ، فسيتم ملؤها مع الخطأ الأول.

fontobserver.provider 

 import { FontObserver } from 'react-typesetting' ;

مزود سياق لتحديد الخطوط التي يجب مراعاتها.

الدعائم

اسم يكتب تقصير وصف
الخطوط مجموعة من ...
واحد من ...
خيط
كائن 1

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

يحدد كل عنصر في المصفوفة family الخط weight style stretch ، مع حاجة family فقط. بالإضافة إلى ذلك ، يمكن أن يحتوي كل عنصر على testString مخصص timeout لهذا الخط ، إذا كان ينبغي أن يختلف عن الإعدادات الافتراضية. إذا كان هناك حاجة إلى اسم العائلة فقط ، يمكن أن يكون عنصر الصفيف مجرد سلسلة.

1 كائن
عائلة خيط
وزن واحد من ...
رقم
خيط
أسلوب خيط
تمتد خيط
TestString خيط
نفذ الوقت رقم
TestString خيط

سلسلة اختبار مخصصة لتمريرها إلى طريقة load لـ FontFaceObserver ، لاستخدامها في جميع الخطوط التي لا تحدد testString الخاصة بها.

نفذ الوقت رقم

مهلة مخصصة في المللي ثانية لتمريرها إلى طريقة load لـ FontFaceObserver ، لاستخدامها في جميع الخطوط التي لا تحدد timeout الخاصة.

أطفال العقدة

المحتوى الذي سيتمكن من الوصول إلى حالة تحميل الخط عبر السياق.

typeetting.provider 

 import { Typesetting } from 'react-typesetting' ;

مزود سياق لتحديد الإعدادات المسبقة لجميع مكونات react-typesetting الأخرى للاستخدام.

الدعائم

اسم يكتب تقصير وصف
الإعدادات المسبقة هدف {}

أسماء تعيين كائن مسبق إلى الدعائم الافتراضية. على سبيل المثال ، بالنظر إلى القيمة: 

 { myPreset : { minFontSize : 1 , maxIterations : 3 } }

... يمكن لمكون TightenText استخدام هذا الإعداد المسبق من خلال تحديد الدعامة preset : 

 < TightenText preset = "myPreset" />
أطفال العقدة

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