2012年02月08日
_ [computer] ReVIEWの表組の縦・横セル接続を後処理で行う
現状、ReVIEWでは表のタテ/ヨコのセルの接続をタグとしてはサポートしていません。 まぁ実際制作しているときに困ることもあるんですが、かといって今のタブ区切りの文法でこれを表現するのはなかなか難しい。
今日PAGE2012で会ったせうぞーさんが困っているということで、自分が実際にどう対処しているかについてちょっと書いておきます。
縦抜き、横抜きが発生する箇所のセル内に、dtpインストラクションを埋め込みます。
= Table test!
//table{
@<dtp>{table colspan=2}A . B
------------------------
C @<dtp>{table rowspan=2}D E
F . G
H I
//}
colspan、rowspanはHTMLの属性そのままですね。つなげるセルのほうは空セルを示す「.」にしておきます（本当に空セルにしたいところはとりあえず全角スペースにでもしておきます）。
これで変換したHTMLには<?dtp table colspan=2?>のようにインストラクションが入ります。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="generator" content="ReVIEW" /> <title>Table test!</title> </head> <body> <h1><a id="h1" />第1章 Table test!</h1> <div class="table"> <table> <tr><th><?dtp table colspan=2 ?>A</th><th></th><th>B</th></tr> <tr><td>C</td><td><?dtp table rowspan=2 ?>D</td><td>E</td></tr> <tr><td>F</td><td></td><td>G</td></tr> <tr><td> </td><td>H</td><td>I</td></tr> </table> </div> </body> </html>
このHTMLを次のようなフィルタに通します。
#!/usr/bin/ruby
require 'rexml/document'
include REXML
doc = Document.new(ARGF).root
# dtpインストラクションを探し、tableに設定されているパラメータを
# そのままそのセルに採用する
XPath.each(doc, "//processing-instruction('dtp')") do |is|
if is.content =~ /\Atable /
is.content.sub(/\Atable /, '').split(/\s*,\s*/).each do |pv|
k, v = pv.split('=', 2)
is.parent.attributes[k] = v # セルの要素の属性にする
end
is.remove
end
end
# セルが空だったら削除。本当に空のセルを作りたいときには、
# 全角スペースでも入れておく
doc.each_element("//th|//td") {|e| e.remove if e.size == 0 }
puts doc
これで目的のHTMLが完成です。
<html xml:lang='ja' xmlns:ops='http://www.idpf.org/2007/ops' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/> <meta content='text/css' http-equiv='Content-Style-Type'/> <meta name='generator' content='ReVIEW'/> <title>Table test!</title> </head> <body> <h1><a id='h1'/>第1章 Table test!</h1> <div class='table'> <table> <tr><th colspan='2'>A</th><th>B</th></tr> <tr><td>C</td><td rowspan='2'>D</td><td>E</td></tr> <tr><td>F</td><td>G</td></tr> <tr><td> </td><td>H</td><td>I</td></tr> </table> </div> </body> </html>
[ツッコミを入れる]