react typesetting

❧ react-typesetting ☙

ส่วนประกอบตอบสนองสำหรับการสร้างการออกแบบเรียงพิมพ์ที่สวยงาม

การสาธิต

---

โครงการนี้มีการทดลองสูง ใช้ความเสี่ยงของคุณเอง!

สารบัญ

• ส่วนประกอบ
  • แน่นหนา
    • อุปกรณ์ประกอบฉาก
  • Preventwidows
    • อุปกรณ์ประกอบฉาก
  • ให้เหตุผล
    • อุปกรณ์ประกอบฉาก
  • เครื่องฟาง
    • อุปกรณ์ประกอบฉาก
  • fontobserver.provider
    • อุปกรณ์ประกอบฉาก
  • Tassetting.provider
    • อุปกรณ์ประกอบฉาก

ส่วนประกอบ

แน่นหนา

 import { TightenText } from 'react-typesetting' ;

กระชับ word-spacing , letter-spacing และ font-size (ตามลำดับ) ด้วยจำนวนขั้นต่ำที่จำเป็นเพื่อให้แน่ใจว่ามีจำนวนเส้นที่ห่อหุ้มและล้นน้อยที่สุด

อัลกอริทึมเริ่มต้นด้วยการตั้งค่าขั้นต่ำของค่าทั้งหมด (กำหนดโดย minWordSpacing , minLetterSpacing และอุปกรณ์ประกอบ minFontSize ) เพื่อตรวจสอบว่าการปรับเหล่านี้จะส่งผลให้เส้นห่อน้อยลงหรือน้อยกว่า ถ้าเป็นเช่นนั้นการค้นหาแบบไบนารีจะดำเนินการ (ด้วย maxIterations ส่วนใหญ่) เพื่อค้นหาสิ่งที่เหมาะสมที่สุด

โดยค่าเริ่มต้นองค์ประกอบจะปรับขนาดที่อาจจำเป็นต้องตรวจพบข้อความโดยอัตโนมัติ โดยการระบุเสา reflowKey คุณสามารถควบคุมด้วยตนเองได้โดยเปลี่ยนเสาเมื่อใดก็ตามที่คุณต้องการให้ส่วนประกอบอัปเดต

โปรดทราบว่าแตกต่างจากข้อความที่เป็นธรรมโดยทั่วไปการปรับพอดีจะต้องใช้กับทุกบรรทัดของข้อความไม่ใช่แค่บรรทัดที่ต้องรัดให้แน่นเพราะไม่มีวิธีที่จะกำหนดเป้าหมายแต่ละเส้นที่ห่อหุ้ม ดังนั้นส่วนประกอบนี้จึงใช้งานได้ดีที่สุดเท่าที่จำเป็นสำหรับการใช้ข้อความสั้น ๆ ที่สำคัญเช่นชื่อหรือฉลาก

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์		ค่าเริ่มต้น	คำอธิบาย
ชื่อชั้นเรียน	สาย			คลาสที่จะนำไปใช้กับ span หุ้มด้านนอกที่สร้างขึ้นโดยส่วนประกอบนี้
สไตล์	วัตถุ			คุณสมบัติสไตล์พิเศษเพื่อเพิ่มไปยัง span หุ้มด้านนอกที่สร้างขึ้นโดยส่วนประกอบนี้
เด็ก	โหนด			เนื้อหาที่จะแสดงผล
minwordspacing	ตัวเลข		-0.02	ระยะห่างขั้นต่ำใน EMS ตั้งค่านี้เป็น 0 หากไม่ควรปรับระยะห่างของคำ
Minletterspacing	ตัวเลข		-0.02	ระยะห่างของตัวอักษรขั้นต่ำใน EMS ตั้งค่านี้เป็น 0 หากไม่ควรปรับระยะห่างของคำ
minfontsize	ตัวเลข		0.97	font-size ขั้นต่ำใน EMS ตั้งค่านี้เป็น 1 หากไม่ควรปรับขนาดตัวอักษร
การเพิ่มจำนวนมาก	ตัวเลข		5	เมื่อทำการค้นหาแบบไบนารีเพื่อค้นหาค่าที่เหมาะสมที่สุดของคุณสมบัติ CSS แต่ละตัวจะกำหนดจำนวนการวนซ้ำสูงสุดให้ทำงานก่อนที่จะชำระค่า
reflowkey	หนึ่งใน ... ตัวเลข สาย			หากระบุให้ปิดการใช้งานการรีมอนอัตโนมัติเพื่อให้คุณสามารถเรียกใช้ด้วยตนเองโดยการเปลี่ยนค่านี้ เสาเองไม่ได้ทำอะไรเลย แต่การเปลี่ยนจะทำให้เกิดปฏิกิริยาตอบสนองต่อการอัปเดตส่วนประกอบ
reflowtimeout	ตัวเลข			Debounces จะไหลย้อนกลับดังนั้นพวกเขาจึงเกิดขึ้นบ่อยครั้งในมิลลิวินาที (ในตอนท้ายของระยะเวลาที่กำหนด) หากไม่ได้ระบุไว้จะมีการคำนวณ reflow ทุกครั้งที่ส่วนประกอบจะแสดงผล
พิการ	บูลีน			ไม่ว่าจะปิดการใช้งานข้อความอย่างสมบูรณ์ การปรับค่าพอดีใด ๆ ที่ได้รับการใช้ในการเรนเดอร์ก่อนหน้านี้จะได้รับการเก็บรักษาไว้
Onreflow	การทำงาน			ฟังก์ชั่นที่จะโทรเมื่อมีการคำนวณเค้าโครงใหม่และข้อความจะถูก refitting เสร็จแล้ว
ตั้งไว้ล่วงหน้า	สาย			ชื่อของที่ตั้งไว้ล่วงหน้าที่กำหนดไว้ใน Typesetting.Provider ด้านนอกส่วนประกอบผู้ขับขี่ หากมีอยู่ค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉากอื่น ๆ ทั้งหมดจะมาจากที่กำหนดไว้ล่วงหน้า

Preventwidows

 import { PreventWidows } from 'react-typesetting' ;

ป้องกันแม่ม่ายโดยการวัดความกว้างของบรรทัดสุดท้ายของข้อความที่แสดงโดยลูก ๆ ขององค์ประกอบ ช่องว่างจะถูกแปลงเป็นช่องว่างที่ไม่ใช่การทำลายจนกว่าจะถึงความกว้างต่ำสุดที่กำหนดหรือจำนวนการทดแทนสูงสุด

โดยค่าเริ่มต้นองค์ประกอบการปรับขนาดที่อาจจำเป็นต้องตรวจพบความกว้างของสายการคำนวณซ้ำโดยอัตโนมัติ โดยการระบุเสา reflowKey คุณสามารถควบคุมด้วยตนเองได้โดยเปลี่ยนเสาเมื่อใดก็ตามที่คุณต้องการให้ส่วนประกอบอัปเดต

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์		ค่าเริ่มต้น	คำอธิบาย
ชื่อชั้นเรียน	สาย			คลาสที่จะนำไปใช้กับ span หุ้มด้านนอกที่สร้างขึ้นโดยส่วนประกอบนี้
สไตล์	วัตถุ			คุณสมบัติสไตล์พิเศษเพื่อเพิ่มไปยัง span หุ้มด้านนอกที่สร้างขึ้นโดยส่วนประกอบนี้
เด็ก	โหนด			เนื้อหาที่จะแสดงผล
MaxSubstitutions	ตัวเลข		3	จำนวนสูงสุดของช่องว่างแทน
minlineWidth	หนึ่งใน ... ตัวเลข สาย การทำงาน		15%	ความกว้างต่ำสุดของบรรทัดสุดท้ายด้านล่างซึ่งจะมีการแทรกช่องว่างที่ไม่ได้ถูกแทรกจนกว่าจะตรงกับขั้นต่ำ ตัวเลข ระบุความกว้างของพิกเซลสัมบูรณ์ สตริงบ่ง บอกถึงค่า width ของ CSS ที่จะคำนวณโดยการฉีดองค์ประกอบลงในคอนเทนเนอร์ชั่วคราวและกำหนดความกว้าง ฟังก์ชั่น จะถูกเรียกด้วยข้อมูลที่เกี่ยวข้องเพื่อกำหนดจำนวนไดนามิกหรือค่าสตริงเพื่อส่งคืน ตัวอย่างเช่นสิ่งนี้สามารถใช้เพื่อให้มีกฎที่แตกต่างกันในจุดพักที่แตกต่างกัน - เช่นการสืบค้นสื่อ
nbspchar	หนึ่งใน ... สาย ปฏิกิริยาตอบสนอง การทำงาน		u00A0	อักขระหรือองค์ประกอบที่จะใช้เมื่อแทนที่ช่องว่าง ค่าเริ่มต้นเป็นอักขระอวกาศที่ไม่ใช่มาตรฐานซึ่งคุณควรติดอยู่อย่างแน่นอนเว้นแต่คุณต้องการเห็นภาพว่ามีการแทรกช่องว่างที่ไม่ได้ถูกแทรกเพื่อจุดประสงค์ในการดีบักหรือปรับความกว้าง ค่า สตริง จะถูกแทรกโดยตรงลงในโหนดข้อความที่มีอยู่ซึ่งมีพื้นที่ ค่า องค์ประกอบปฏิกิริยา จะถูกแสดงเป็นโหนด“ ตู้อบ” ในหน่วยความจำจากนั้นจึงทำการปลูกถ่ายเป็น DOM โดยแยกโหนดข้อความที่พบพื้นที่ ค่า ฟังก์ชั่น จะต้องสร้างสตริงโหนดข้อความโหนดองค์ประกอบหรือปฏิกิริยาตอบสนองเพื่อแทรก
reflowkey	หนึ่งใน ... ตัวเลข สาย			หากระบุให้ปิดการใช้งานการรีมอนอัตโนมัติเพื่อให้คุณสามารถเรียกใช้ด้วยตนเองโดยการเปลี่ยนค่านี้ เสาเองไม่ได้ทำอะไรเลย แต่การเปลี่ยนจะทำให้เกิดปฏิกิริยาตอบสนองต่อการอัปเดตส่วนประกอบ
reflowtimeout	ตัวเลข			Debounces จะไหลย้อนกลับดังนั้นพวกเขาจึงเกิดขึ้นบ่อยครั้งในมิลลิวินาที (ในตอนท้ายของระยะเวลาที่กำหนด) หากไม่ได้ระบุไว้จะมีการคำนวณ reflow ทุกครั้งที่ส่วนประกอบจะแสดงผล
พิการ	บูลีน			ไม่ว่าจะปิดการป้องกันแม่ม่ายอย่างสมบูรณ์
Onreflow	การทำงาน			ฟังก์ชั่นที่จะโทรเมื่อมีการคำนวณเค้าโครงใหม่และทำการทดแทนอวกาศ
ตั้งไว้ล่วงหน้า	สาย			ชื่อของที่ตั้งไว้ล่วงหน้าที่กำหนดไว้ใน Typesetting.Provider ด้านนอกส่วนประกอบผู้ขับขี่ หากมีอยู่ค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉากอื่น ๆ ทั้งหมดจะมาจากที่กำหนดไว้ล่วงหน้า

ให้เหตุผล

 import { Justify } from 'react-typesetting' ;

แม้ว่าสิ่งนี้อาจรวมถึงคุณสมบัติการให้เหตุผลขั้นสูงในอนาคต แต่ปัจจุบันมันง่ายมาก: มันใช้การจัด text-align: justify องค์ประกอบคอนเทนเนอร์ (A <p> โดยค่าเริ่มต้น) ขึ้นอยู่กับว่ามีพื้นที่เพียงพอที่จะหลีกเลี่ยงช่องว่างคำขนาดใหญ่ที่ไม่คาดคิด ความกว้างขั้นต่ำถูกกำหนดโดย minWidth และค่าเริ่มต้นเป็น 16 EMS

คุณอาจทำสิ่งนี้ให้สำเร็จด้วยการสืบค้นสื่อ แต่ส่วนประกอบนี้สามารถกำหนดความกว้างที่แน่นอนที่มีอยู่ในองค์ประกอบคอนเทนเนอร์แทนที่จะเป็นเพียงแค่ทั้งหน้า

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์		ค่าเริ่มต้น	คำอธิบาย
ชื่อชั้นเรียน	สาย			คลาสที่จะนำไปใช้กับองค์ประกอบ wrapper ด้านนอกที่สร้างขึ้นโดยองค์ประกอบนี้
สไตล์	วัตถุ			คุณสมบัติสไตล์พิเศษที่จะเพิ่มลงในองค์ประกอบด้านนอกที่สร้างขึ้นโดยส่วนประกอบนี้
เด็ก	โหนด			เนื้อหาที่จะแสดงผล
เช่น	หนึ่งใน ... สาย การทำงาน วัตถุ		P	ประเภทองค์ประกอบที่จะทำให้เด็กที่ให้มา มันจะต้องเป็นองค์ประกอบระดับบล็อกเช่น p หรือ div เนื่องจาก text-align ไม่มีผลต่อองค์ประกอบอินไลน์ มันอาจเป็นองค์ประกอบปฏิกิริยาแบบกำหนดเองตราบใดที่มันใช้ forwardRef
Minwidth	หนึ่งใน ... ตัวเลข สาย		16EM	ความกว้างขั้นต่ำที่จะอนุญาตให้มีข้อความที่เป็นธรรม ตัวเลขระบุความกว้างของพิกเซลสัมบูรณ์ สตริงจะถูกนำไปใช้กับ CSS ขององค์ประกอบเพื่อทำการคำนวณความกว้าง
เริ่มต้นใหม่	บูลีน		จริง	ไม่ว่าจะเริ่มต้นการจัด text-align: justify ก่อนที่ความกว้างที่มีอยู่จะได้รับการพิจารณา
reflowkey	หนึ่งใน ... ตัวเลข สาย			หากระบุให้ปิดการใช้งานการรีมอนอัตโนมัติเพื่อให้คุณสามารถเรียกใช้ด้วยตนเองโดยการเปลี่ยนค่านี้ เสาเองไม่ได้ทำอะไรเลย แต่การเปลี่ยนจะทำให้เกิดปฏิกิริยาตอบสนองต่อการอัปเดตส่วนประกอบ
reflowtimeout	ตัวเลข			Debounces จะไหลย้อนกลับดังนั้นพวกเขาจึงเกิดขึ้นบ่อยครั้งในมิลลิวินาที (ในตอนท้ายของระยะเวลาที่กำหนด) หากไม่ได้ระบุไว้จะมีการคำนวณ reflow ทุกครั้งที่ส่วนประกอบจะแสดงผล
พิการ	บูลีน			ไม่ว่าจะปิดการตรวจจับเหตุผลอย่างสมบูรณ์ การจัดตำแหน่งสุดท้ายที่ถูกนำไปใช้จะถูกเก็บรักษาไว้
Onreflow	การทำงาน			ฟังก์ชั่นที่จะโทรเมื่อมีการคำนวณเค้าโครงใหม่และมีการใช้เหตุผลหรือไม่ถูกนำไปใช้
ตั้งไว้ล่วงหน้า	สาย			ชื่อของที่ตั้งไว้ล่วงหน้าที่กำหนดไว้ใน Typesetting.Provider ด้านนอกส่วนประกอบผู้ขับขี่ หากมีอยู่ค่าเริ่มต้นสำหรับอุปกรณ์ประกอบฉากอื่น ๆ ทั้งหมดจะมาจากที่กำหนดไว้ล่วงหน้า

เครื่องฟาง

 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 วัตถุ
	ตระกูล	สาย
	น้ำหนัก	หนึ่งใน ... ตัวเลข สาย
	สไตล์	สาย
	ยืด	สาย
	การทดสอบ	สาย
	การหมดเวลา	ตัวเลข
การทดสอบ	สาย			สตริงทดสอบที่กำหนดเองเพื่อส่งผ่านไปยังวิธี load ของ FontFaceObserver เพื่อใช้สำหรับแบบอักษรทั้งหมดที่ไม่ได้ระบุ testString ของตัวเอง
การหมดเวลา	ตัวเลข			การหมดเวลาที่กำหนดเองในมิลลิวินาทีเพื่อส่งผ่านไปยังวิธี load ของ FontFaceObserver เพื่อใช้สำหรับแบบอักษรทั้งหมดที่ไม่ได้ระบุ timeout ของตนเอง
เด็ก	โหนด			เนื้อหาที่จะสามารถเข้าถึงสถานะการโหลดแบบอักษรผ่านบริบท

Tassetting.provider

 import { Typesetting } from 'react-typesetting' ;

ผู้ให้บริการบริบทสำหรับการกำหนดค่าที่ตั้งไว้ล่วงหน้าสำหรับส่วนประกอบอื่น ๆ react-typesetting ต่อการใช้งาน

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์		ค่าเริ่มต้น	คำอธิบาย
การตั้งค่าล่วงหน้า	วัตถุ		-	ชื่อการแมปวัตถุที่ตั้งไว้ล่วงหน้าเป็นอุปกรณ์ประกอบฉากเริ่มต้น ตัวอย่างเช่นได้รับค่า: { myPreset : { minFontSize : 1 , maxIterations : 3 } } …ส่วนประกอบ TightenText สามารถใช้ที่ตั้งไว้ล่วงหน้านี้ได้โดยระบุเสาที่ preset : < TightenText preset = "myPreset" />
เด็ก	โหนด			เนื้อหาที่จะสามารถเข้าถึงค่าที่กำหนดไว้ล่วงหน้าผ่านบริบท