🔎
slidevでエクスポート時にレイアウトが崩れる場合のデバック方法
勉強会用のスライドはslidevを利用して作成していますが、レイアウト用のCSSファイルを編集した場合に何度かPDFとしてエクスポートしたファイルのレイアウトが崩れてしまう現象に何度か遭遇しました。
調べてみた限り、デバック方法を記載した記事などがなかったので同じような症状に悩んでいる方向けに記事に残しておきます。
エクスポートされる表示をブラウザから確認する方法
先に結論を記載しておくと、ローカルホストを起動後（npx slidev実行後）に下記のアドレスにアクセスするとプレゼンテーション画面とは別にエクスポートされるスライドがブラウザ上で確認できます。
http://localhost:3030/print?print
なぜローカルとエクスポート時で表示が変わるのか
エクスポート時にレイアウトが崩れてしまう場合のハマりがちなポイントとしては。
- エクスポート時は１ページにすべてのスライドを描画している
- ローカルサーバーとエクスポート時でIDやClass名などが変わる場合がある
この2点を抑えておくと原因が特定しやすい気がします。
エクスポート時は１ページにすべてのスライドを描画している
まずはこちらですが、slidevはPDFへの出力時にはページを分割しておらず、1ページをまとめてPDFとして出力したあとにページの分割を行っています。
これにより、スライド全体に背景のグラデーションを適用したCSSなどを追加するとグラデーションの位置がズレることなどがありました。
ローカルサーバーとエクスポート時でIDやClass名などが変わる場合がある
また、slidevではローカルサーバーとエクスポート時でClass名やIDなどCSSセレクタとして利用する属性値に変更が入る場合があります。
自分の場合、#app #slide-content <任意のセレクタ>のようにデフォルトテーマのCSSを上書きしてテーマを作っていましたが、このセレクタがエクスポート時には#app #print-contentになっていました。
これにより一部の上書きしたはずのCSSにスタイルが当たらない現象が発生していました。
Discussion