Hatena::ブログ(Diary)

himajin315の記録

2015-03-12

【Re:VIEW】表のセル内でURLを折り返しする方法

Re:VIEWを使って、PDFを作成する時に、表がおかしくなることがあります。
特に厄介だったURLなどの長いアルファベットの綴りなどが折り返ししてくれないことです。

今回はセル内で折り返しをするためにやったことを書きます!!!

Re:VIEWのサンプルコードを使用したいと思います。
https://github.com/takahashim/review-sample-book


まずは状態の再現を行います。
ch01.re ファイル一番下にに以下のようにコードを追加します。
Re:VIEWのtableの書き方についてformat.ja.mdを参照するとよいでしょう。

より詳しくは、
@<href>{https://github.com/kmuto/review/blob/master/doc/format.rdoc}
を御覧ください。

//table[tbl1][]{
サイト名	URL
-----------------
Google	https://www.google.co.jp/
himajin315の記録	http://d.hatena.ne.jp/himajin315/
himajin315の記録(Railsチュートリアル(1~3章)をやった時のエラー解消)	http://d.hatena.ne.jp/himajin315/20140424/1398360454
//}

実行し、確認してみましょう。

$ review-pdfmaker config.yml 
$ open open book.pdf

以下の様なページができました。
f:id:himajin315:20150312162644p:image

表が横にはみ出している状態です。
f:id:himajin315:20150312162645p:image

まぁ横にはみ出すのはすぐに修正できます。
幅を指定してあげるだけでOKです。

//tsize[60,60]
//table[tbl1][]{
サイト名	URL
-----------------
Google	https://www.google.co.jp/
himajin315の記録	http://d.hatena.ne.jp/himajin315/
himajin315の記録(Railsチュートリアル(1~3章)をやった時のエラー解消)	http://d.hatena.ne.jp/himajin315/20140424/1398360454
//}

//tsize[60,60]で大きさを指定してあげると以下の様な表ができます。
f:id:himajin315:20150312162646p:image

見てわかると思いますが、日本語はちゃんと折り返しをしているのにURLは折り返ししてくれません。
URLも表をはみださないように改行して欲しいですよね。


ここからが本題です。
流れは以下のとおりです。

  1. seqsplit.styをダウンロード
  2. review-ext.rbを作成し、Re:VIEWの拡張
  3. 折り返しして欲しい文字列に追加
  4. パッケージを追加するように記述


1.seqsplit.styをダウンロード

URLなどの続いたアルファベットを改行するためにseqsplit.styというTexのパッケージを追加する必要があります。
これを使うことで、表の中で強制的に折り返ししてくれるようになります。
seqsplit.styをダウンロードし、styディレクトリに入れましょう。

$ wget http://math.sut.ac.th/lab/software/texlive/texmf-dist/tex/latex/seqsplit/seqsplit.sty
$ mv seqsplit.sty src/sty

2.review-ext.rbを作成し、Re:VIEWの拡張

Texのコードに追加したのですが、直接Texに書くのもあれですよね。。。
Re:VIEWを拡張することで、reviewに書いたことがTexに反映されるようにします。

\\seqsplit{...}  # LaTexでの書き方

@<seqsplit>{...} #Re:VIEWでの書き方

review-ext.rb とファイルをconfig.ymlを同じ階層に作成してあげることで、Re:VIEWを拡張することができます。


review-ext.rbの書き方については検索したらいろいろと出てきますので、そちらを参考にしてください。review-ext.rb のサンプルが欲しい #97

3.折り返しして欲しい文字列に追加

拡張したので、早速折り返しして欲しい文字列に追加してみましょう。

//tsize[60,60]
//table[tbl1][]{
サイト名	URL
-----------------
Google	https://www.google.co.jp/
himajin315の記録	http://d.hatena.ne.jp/himajin315/
himajin315の記録(Railsチュートリアル(1~3章)をやった時のエラー解消)	@<seqsplit>{http://d.hatena.ne.jp/himajin315/20140424/1398360454}
//}

今回は "http://d.hatena.ne.jp/himajin315/20140424/1398360454" だけでいいので、@<seqsplit>{...}で囲んであげましょう。

4.パッケージを追加するように記述

最後にtexファイルに\usepackage{seqsplit}を追加する必要がありますね。
通常はconfig.ymlのtexstyle: に欲しいパッケージを描いてあげるとすぐにできます。

colophon: true
texstyle: seqsplit
pubhistory: |
  2011年08月03日 v1.0.0版発行
debug: true

でも、今回はすでにsamplemacroというパッケージがあります。
パッケージを複数使いたい場合はsamplemacro.styの中に\usepackage{seqsplit}を加えてあげるとよいでしょう。

\usepackage{seqsplit}

%% from review-pdfmaker                                                                                      
\usepackage{fancyhdr}
\pagestyle{fancy}


さて、以上で作業は終了。
実行して確かめてみましょう。

$ rm -rf book*  
$ review-pdfmaker config.yml
$ open book.pdf  

f:id:himajin315:20150312172442p:image

うん。完璧(╹◡╹)


epubの場合

ちなみに、epub版はすぐにできます。
f:id:himajin315:20150312172646p:image

CSSのword-break: break-all;を使うだけです。
main.cssのtableのところにword-break: break-all;を追加してください。

table tr td {
    padding: 0.3em;
    border:1px #aaa solid;
    font-size: 0.75em;
    word-break: break-all;
}

f:id:himajin315:20150312172925p:image

以上です。
お疲れ様でした\\\\└(*’ω’*)」////

リンク元