react typesetting

❧反応型タイプセット☙

美しくタイプセットのデザインを作成するためのコンポーネントを反応させます。

デモ！

---

ショ和このプロジェクトは非常に実験的です。あなた自身の責任で使用してください！

目次

• コンポーネント
  • Tightentext
    • 小道具
  • PreventWidows
    • 小道具
  • 正当化します
    • 小道具
  • fontobserver
    • 小道具
  • fontobserver.provider
    • 小道具
  • TypeSetting.Provider
    • 小道具

コンポーネント

Tightentext

 import { TightenText } from 'react-typesetting' ;

最小数のラインとオーバーフローを確保するために必要な最小量だけで、 word-spacing 、 letter-spacing 、 font-size （その順序で）を締めます。

アルゴリズムは、すべての値の最小値を設定し（ minWordSpacing 、 minLetterSpacing 、 minFontSize Propsで定義）、これらを調整するとラップラインが少ないかオーバーフローが少ないかどうかを判断することから始まります。もしそうなら、最適なフィット感を見つけるために（ほとんどのmaxIterationsで）バイナリ検索が実行されます。

デフォルトでは、テキストの再修正が必要になる可能性がある要素のサイズが自動的に検出されます。 reflowKey Propを指定することにより、コンポーネントを更新するたびにプロップを変更することにより、代わりに手動制御を行うことができます。

典型的な正当なテキストとは異なり、個々のラップラインをターゲットにする方法がないため、締める必要がある行だけでなく、テキストのすべての行に適合調整が適用される必要があることに注意してください。したがって、このコンポーネントは、タイトルやラベルなどのテキストのタイポグラフィで重要な短い実行に控えめに使用するのが最適です。

小道具

名前	タイプ		デフォルト	説明
className	弦			このコンポーネントによって作成された外側のラッパーspanに適用するクラス。
スタイル	物体			このコンポーネントによって作成された外側のラッパーspanに追加する追加のスタイルプロパティ。
子供たち	ノード			レンダリングするコンテンツ。
minwordspacing	番号		-0.02	EMSの最小単語間隔。単語間隔を調整しない場合、これを0に設定します。
minlettersterspacing	番号		-0.02	EMSの最小文字間隔。単語間隔を調整しない場合、これを0に設定します。
minfontsize	番号		0.97	EMSの最小font-size 。フォントサイズを調整しない場合、これを1に設定します。
マキシテレーション	番号		5	バイナリ検索を実行して各CSSプロパティの最適な値を見つけると、値に落ち着く前に実行する最大の反復数が設定されます。
リフローキー	の1つ… 番号 弦			指定されている場合は、自動リフローを無効にして、この値を変更して手動でトリガーできるようにします。小道具自体は何もしませんが、それを変更すると、反応によりコンポーネントが更新されます。
ReflowTimeout	番号			討論は反射して、最大でこれがミリ秒で（与えられた期間の終わりに）起こることが多い。指定されていない場合、コンポーネントがレンダリングされるたびにリフローが計算されます。
無効	ブール			テキストの再補充を完全に無効にするかどうか。以前のレンダリングですでに適用されている適合調整は保持されます。
onreflow	関数			レイアウトが再計算され、テキストが再補充されたときに呼び出す関数。
プリセット	弦			外側のTypesetting.Providerコンポーネントで定義されたプリセットの名前。それが存在する場合、他のすべての小道具のデフォルト値は、指定されたプリセットから得られます。

PreventWidows

 import { PreventWidows } from 'react-typesetting' ;

コンポーネントの子供が提供する最後のテキストの幅を測定することにより、未亡人を防ぎます。スペースは、与えられた最小幅または置換の最大数に達するまで、非壊れたスペースに変換されます。

デフォルトでは、要素が再構成する必要がある可能性がある要素は、自動的に検出される可能性があることを変更します。 reflowKey Propを指定することにより、コンポーネントを更新するたびにプロップを変更することにより、代わりに手動制御を行うことができます。

小道具

名前	タイプ		デフォルト	説明
className	弦			このコンポーネントによって作成された外側のラッパーspanに適用するクラス。
スタイル	物体			このコンポーネントによって作成された外側のラッパーspanに追加する追加のスタイルプロパティ。
子供たち	ノード			レンダリングするコンテンツ。
maxsubstitutions	番号		3	代用するスペースの最大数。
分線幅	の1つ… 番号 弦 関数		15％	最後の線の最小幅。下の境界線は、最小値が満たされるまで挿入されます。 数字は絶対ピクセル幅を示します。 文字列は、コンテナに要素を一時的に注入し、その幅を決定することによって計算されるCSS width値を示します。 関数は、関連するデータで呼び出され、返す動的な数値または文字列値を決定します。これは、たとえば、メディアクエリのように、異なるブレークポイントで異なるルールを持つために使用できます。
nbspchar	の1つ… 弦 反応要素 関数		u00A0	スペースを置き換えるときに使用するキャラクターまたは要素。デフォルトは、標準的な非壊れたスペースキャラクターになります。これは、デバッグ目的で非壊れたスペースが挿入されている場所を視覚化するか、幅を調整しない限り、ほぼ確実に固執する必要があります。 文字列値は、スペースを含む既存のテキストノードに直接挿入されます。 React Element値は、インメモリの「インキュベーター」ノードにレンダリングされ、その後、DOMに移植され、スペースが見つかったテキストノードを分割します。 関数値は、文字列、テキストノード、要素ノード、または挿入する要素を生成する必要があります。
リフローキー	の1つ… 番号 弦			指定されている場合は、自動リフローを無効にして、この値を変更して手動でトリガーできるようにします。小道具自体は何もしませんが、それを変更すると、反応によりコンポーネントが更新されます。
ReflowTimeout	番号			討論は反射して、最大でこれがミリ秒で（与えられた期間の終わりに）起こることが多い。指定されていない場合、コンポーネントがレンダリングされるたびにリフローが計算されます。
無効	ブール			未亡人の予防を完全に無効にするかどうか。
onreflow	関数			レイアウトが再計算され、スペース置換が行われたときに呼び出す関数。
プリセット	弦			外側のTypesetting.Providerコンポーネントで定義されたプリセットの名前。それが存在する場合、他のすべての小道具のデフォルト値は、指定されたプリセットから得られます。

正当化します

 import { Justify } from 'react-typesetting' ;

これには、将来のより高度な正当化機能が含まれる場合がありますが、現在非常に単純です。 text-align: justifyコンテナ要素（デフォルトでは、a <p> ）に正当化します（デフォルトでは）、大きくて見た目のない単語のギャップを避けるのに十分なスペースがあるかどうかに応じて。最小幅はminWidthで定義され、デフォルトは16のEMSになります。

また、メディアクエリでこれを達成することもできますが、このコンポーネントは、ページ全体ではなく、コンテナ要素が利用できる正確な幅を決定できます。

小道具

名前	タイプ		デフォルト	説明
className	弦			このコンポーネントによって作成された外側のラッパー要素に適用するクラス。
スタイル	物体			このコンポーネントによって作成された外側のラッパー要素に追加する追加のスタイルプロパティ。
子供たち	ノード			レンダリングするコンテンツ。
として	の1つ… 弦 関数 物体		p	供給された子供をレンダリングする要素タイプ。 text-alignインライン要素に影響を与えないため、 pやdivなどのブロックレベルの要素でなければなりません。また、 forwardRefを使用する限り、カスタムReactコンポーネントである可能性があります。
ミニ幅	の1つ… 番号 弦		16em	正当なテキストを許可する最小幅。数字は絶対ピクセル幅を示します。文字列は、幅計算を実行するために要素のCSSに適用されます。
initialjustify	ブール		真実	最初にtext-align: justify 。
リフローキー	の1つ… 番号 弦			指定されている場合は、自動リフローを無効にして、この値を変更して手動でトリガーできるようにします。小道具自体は何もしませんが、それを変更すると、反応によりコンポーネントが更新されます。
ReflowTimeout	番号			討論は反射して、最大でこれがミリ秒で（与えられた期間の終わりに）起こることが多い。指定されていない場合、コンポーネントがレンダリングされるたびにリフローが計算されます。
無効	ブール			正当化検出を完全に無効にするかどうか。適用された最後のアライメントは保存されます。
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つ… 弦 オブジェクト1			ロードして観察するフォント。フォントファイル自体は、どこか（CSS内）に指定されている必要があります。このコンポーネントは、 FontFaceObserverを使用して、必要に応じて強制的にロードを強制し、準備ができたら観察する必要があります。 配列内の各アイテムは、フォントfamily 、 weight 、 style 、 stretchを指定し、 familyのみが必要です。さらに、各アイテムには、デフォルトとは異なる場合は、そのフォントのカスタムtestStringとtimeout含めることができます。姓のみが必要な場合、配列アイテムは文字列にすぎません。
	1つのオブジェクト
	家族	弦
	重さ	の1つ… 番号 弦
	スタイル	弦
	ストレッチ	弦
	テストストリング	弦
	タイムアウト	番号
テストストリング	弦			FontFaceObserverのload方法に渡すカスタムテスト文字列。独自のtestStringを指定しないすべてのフォントに使用します。
タイムアウト	番号			Millisecondsでのカスタムタイムアウトは、 FontFaceObserverのload方法に渡され、独自のtimeoutを指定しないすべてのフォントに使用します。
子供たち	ノード			コンテキストを介してフォントの読み込みステータスにアクセスできるコンテンツ。

TypeSetting.Provider

 import { Typesetting } from 'react-typesetting' ;

使用する他のすべてのreact-typesettingコンポーネントのプリセットを定義するためのコンテキストプロバイダー。

小道具

名前	タイプ		デフォルト	説明
プリセット	物体		{}	プリセット名をデフォルトのプロップにマッピングするオブジェクト。たとえば、値が与えられます。 { myPreset : { minFontSize : 1 , maxIterations : 3 } } … TightenTextコンポーネントは、 presetプロップを指定することにより、このプリセットを使用できます。 < TightenText preset = "myPreset" />
子供たち	ノード			コンテキストを介して定義されたプリセットにアクセスできるコンテンツ。