16

CSS3 GCPM 仕様では、次のように定義されています。

<style>
 .footnote { float: footnote }
</style>

<p>A sentence consists of words. <span class="footnote">Most often.</span>.

レンダリング

文は単語で構成されています。¹

 ¹ ほとんどの場合。[（各）ページの最後に]

印刷時 (スクリーン メディア タイプでも機能しますが、印刷で機能する限り、私は満足しています)。

どんなに複雑であっても、これはまさに私がやりたいことですが、私が知る限り、この仕様や css-paging 仕様を実装している最新のブラウザーはありません。JavaScript を使用する場合、この効果を達成する方法はありますか。少なくとも、いくつかのライブラリを使用して pdf を生成することは可能ですが、可能であれば、html の機能 (float など) を失わないようにしたいと考えています。

ご参考までに、メモは

注記とは、本や文書のページの下部、または章、巻、またはテキスト全体の最後に配置される一連のテキストです。

そして脚注は

...ページの下部にあるメモ、巻末のメモは、章、巻、または作品全体の最後の別の見出しの下に集められます。

詳細については、wikipage on notes in typographyを参照してください。

解決策を探すことができる1つの可能な方向は、単一ページの高さを把握することです29.7cm.26.1cmコード：

<style>
    @page{
        margin:0px;
        padding:0px;
    }
    html,body,*{
        margin:0px;
        padding:0px;
    }
    p{
        border:1px solid black;
        height:26.1cm;
    }
</style>

といくつかの空<p>の 's。この格差の説明（したがって、それを制御できるようにする）で十分な解決策だと思います。

4

3 に答える 3

4

最初に、ページの高さ27.9cmと26.1cm. これには、少なくとも次のようないくつかの原因が考えられます。

  1. お使いの現在のプリンターでは、印刷メカニズムが原因で独自の印刷不可能な余白が発生する場合があります。
  2. 現在のブラウザは、ページ ヘッダーやフッターなどに独自の余白を追加します。ユーザーがページ ヘッダーとフッターを非表示にすることを選択したかどうかによって、これらを非表示にする場合としない場合があります。一部のブラウザーは抑制し、一部のブラウザーはスペースを保持して空白にします。

これら 2 つのソースのいずれも、ページの作成者が調査するために利用することはできません。

しかし...

脚注を本来の動作にする JQuery ソリューションを開発することができました。

  1. 埋め込まれた脚注が抽出され、自動的にカウントされ、上付きの数字に置き換えられます。すなわち:

    <div>My first sentence consists of words<span class="footnote">My first footnote.</span></div>

    になる

    <div>My first sentence consists of words<sup>1</sup></div>

    テキスト付き

    1 My first footnote.

    現在の印刷サイズの「ページ」の下部。

  2. 文書の内容は、現在のページの脚注を各印刷サイズの「ページ」の最後に挿入することにより、「ページ」にフォーマットされます。<div>ページごとに特別に手動で挿入する必要はありません。
  3. このソリューションは、テキスト ブロックを分割せず、既存のテキスト ブロック間に脚注を挿入します (このソリューションは、トップ レベル<div>または<p>要素のスキャンをサポートします)。
  4. これは、Safari、Firefox、および Chrome (Mac のみ) でテストしました。

実際の例については、フィドルを参照してください。Javascript は私が望むよりも少し複雑 (92 行) であり、通常のレイアウトに戻す前に、指示された pageHeight と pageWidth に基づいて一時的にブラウザにページをレイアウトさせることによって機能します。

更新しました：

私は、@ apaul34208 がブラウザーに依存せずにページ全体のサイズを達成するために使用した手法をマージした、わかりやすいバージョンを作成しましたが、埋め込まれた脚注の抽出と、プリンターに合わせて各ページの正しい脚注の自動ページ付けの概念を保持しています。これは、A4 と US Letter の両方で変更することなく、Safari、Chrome、および Firefox (Mac でのみテスト済み) で機能するようになりました。改ページは、<div>または<p>境界に限定されます。ポールに感謝します。

更新された実際の例は次のとおりです: fiddle

またはここでページプレビューの全画面表示:結果ページのみ

于 2014-05-13T15:05:37.577 に答える
1

私はあなたが話していることを正確に行うためにPrinceXMLを使用してきましたが、その欠点は、シェルスクリプトを使用してコンピューターにインストールする必要があることです。

同僚と私は、基本的には html テキスト エディターですが、html を PDF としてエクスポートできるシンプルなアプリに取り組んでおり、目次、脚注、頭などすべてが含まれています。

プリンスは、これまでに出会った中で最高です。これがうまくいかない場合はお知らせください。

于 2014-05-11T02:38:53.673 に答える