タグ

ブックマーク / yuheiy.com (2)

  • 日本語におけるtext-wrapプロパティの運用

    CSStext-wrapプロパティを使うと、テキストの行の折り返し方法を変更できる。text-wrap: balanceを適用すると、適用しない場合と比べて次のように変化する。 CSS text-wrap: balance  |  CSS and UI  |  Chrome for Developers text-wrap: balanceが適用された下の例では、すべての行の長さが均等になるように制御されている。 しかし正確に言えば、すべての行の長さが必ずしもまったく同じになるわけではない。文字の適切な折り返し位置を考慮した上で、おおよそ同じくらいの長さになるように分配される、というのが正しい。その際、一つの英単語の途中で行が分割されるようなことは通常起こらない。これは、英語では単語の区切りに空白文字を挟んで記述されるが(わかち書き)、それが改行位置を決めるためのヒントとなるからである。

    日本語におけるtext-wrapプロパティの運用
    yggdra_w
    yggdra_w 2024/07/22
  • ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン

    ReactUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、一般的には、Buttonコンポーネントにas propを実装して対処することが多い。 function Button({ as: Component = 'button', ...props }) { return <Component {...props} />; } render( <> <Button type="button"> I’m a <code>button</code> element </Button> <Button as="a" href="

    ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
  • 1