Q&A
https://qiita.com/shinek92/questions/bcaa0083d8248fb96581
以下ご対応ください。
https://teratail.com/help#posted-otherservice
teratail初使用でどのくらい回答が得られるのか不確かのため同質問を別プラットフォームでも掲載中
https://qiita.com/shinek92/questions/bcaa0083d8248fb96581
前提・実現したいこと
Reactにてwordのようなエディタを実現したいのではなく、上の画像ような見た目を実現しReactコンポーネントで書類のスタイルを作りたい。
与えたテキストがブロックをoverflowすると自動的に新しいブロックが追加され、続きが表示されるようにしたい。
試したこと
cssにてmulti-columnレイアウトを試しました。おおよそできそうな感じですが、ページ番号などを振りたいのでmulti-columnレイアウトではそれは無理そうなのと、段落方向が一方向（横書きなら左から右、縦書きなら上から下）にしかならないので、やはりコンポーネントでできるようになる糸口を探しています。
ご教授お願いします。
回答1件
0
CSS Regions がそのような機能を持っています。
「CSS Regionsを使った新しいCSSレイアウトを作る方法」HTML5 Conference2013レポート | HTML5Experts.jp
W3Cの仕様はワーキングドラフトとなっていますが、2014年より更新がありません。
ブラウザ対応は、IE11と過去のwebkit系にとどまっています。
"CSS Regions" | Can I use... Support tables for HTML5, CSS3, etc
ポリフィルはあるようですが、あまり活発ではないようです。
GitHub - FremyCompany/css-regions-polyfill: A javascript implementation of the CSS Regions specification, as of August 2013
GitHub - adobe-webplatform/css-regions-polyfill: Experimental CSS Regions polyfill written in JavaScript
CSSの組版モジュールである、CSS GCPM も止まっているようです。
CSS Generated Content for Paged Media Module
以上のような状況ですので、CSSで対応するのは難しく、VivlioStyle のようなページングをするモジュールを使うのが現実的かな、と思います。
vivliostyle.js/packages/react at master · vivliostyle/vivliostyle.js · GitHub
ただ、ご質問を読むとページメディアにしたいわけではなさそうなので、そうすると CSS Regions ポリフィルなどを元に自分でやるしかないのかもしれません。
投稿2021/09/09 01:19
総合スコア36960
あなたの回答
tips
プレビュー
