この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
dokuwiki:ediptable_space [2019/01/04 11:43] 管理者 |
— (現在) | ||
---|---|---|---|
ライン 1: | ライン 1: | ||
- | ====== 📝DokuWiki edittable pluginのホワイトスペース対策 ====== | ||
- | |||
- | DokuWikiの[[edittable-plugin|edittable plugin]](テーブル編集プラグイン)で表を編集すると各列の最も長い文字列に合わせて前後にホワイトスペースが挿入されます。英語など半角文字しか使わない場合はこのホワイトスペースにより通常のテキスト編集モードでも表が綺麗に整列して見えるのですが、日本語など全角文字が含まれる場合は位置ずれが発生しテキスト編集モードでは見ずらくなってしまうので、ホワイトスペースの自動挿入機能を改造して見やすくします。 | ||
- | |||
- | 注意:改造により不具合が発生する可能性があります自己責任でご利用下さい。またPHP・DokuWiki本体・プラグインのバージョンによっては動作しなくなる可能性もあります。 | ||
- | ---- | ||
- | <html> | ||
- | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
- | <!-- respon_0 --> | ||
- | <ins class="adsbygoogle" | ||
- | style="display:block" | ||
- | data-ad-client="ca-pub-9251612436023685" | ||
- | data-ad-slot="1409739163" | ||
- | data-ad-format="auto"></ins> | ||
- | <script> | ||
- | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
- | </script> | ||
- | </html> | ||
- | |||
- | ===== はじめに ===== | ||
- | |||
- | 未改造状態では表を編集すると下記のようにホワイトスペースが挿入されます(ホワイトスペースは半角ピリオドで表現しています) | ||
- | |||
- | 半角文字だけなら縦方向に綺麗に整形されますが、 | ||
- | |||
- | |{{:media:201901:20190104_112515_ediptable.jpg|}}| | ||
- | |||
- | 全角文字が混じると縦方向が崩れてしまう。 | ||
- | |||
- | |{{:media:201901:20190104_112516_ediptable.jpg|}}| | ||
- | |||
- | |||
- | この問題は全角文字を2文字分としてではなく1文字として計算しているのが原因なので、改造して正しくカウントできるようにすると次のよう全角でも綺麗に整形されます。 | ||
- | |||
- | |{{:media:201901:20190104_112517_ediptable.jpg|}}| | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | ==== 改造1・長さを一定にするホワイトスペースを全角に対応する ==== | ||
- | |||
- | 通常の長さを一定にするホワイトスペースの数の計算は全角も半角も1文字は1スペースと計算する事でズレが発生するので、全角2文字・半角1文字として計算するように変更します。 | ||
- | |||
- | 編集画面など固定ピッチフォントで表示すると綺麗に整列して見えます。 | ||
- | |||
- | <code> | ||
- | ^.name.......^.birthday.........^ | ||
- | |.山田 太郎..|.平成元年1月1日...| | ||
- | |.伊藤 一....|.平成2年12月31日..| | ||
- | </code> | ||
- | |||
- | ''./lib/plugins/edittable/action/editor.php'' を開き137行目を書き換えます。(プラグインのバージョンによって行番号は変更する可能性があります) | ||
- | |||
- | <code php> | ||
- | //137行目 改造前 | ||
- | $len = utf8_strlen($data[$row][$col]); | ||
- | |||
- | //↓ | ||
- | |||
- | //137行目 改造後 | ||
- | $len=mb_strwidth($data[$row][$col]); | ||
- | </code> | ||
- | |||
- | ==== 改造2 前後のホワイトスペースを除去 ==== | ||
- | |||
- | 改造カ所は2つあります。1つ目は「長さを一定にするホワイトスペースを入れなくします」、2つめは「Center・Left・Rightに表示位置によって自動挿入されるホワイトスペースの数を変更します」 | ||
- | |||
- | |||
- | **・長さを一定にするホワイトスペースを入れない方法 ** | ||
- | |||
- | Center・Left・Rightでのスペースのみ入ります(通常はLeft時にスペースは左に1個・右に2個入ります) | ||
- | |||
- | <code> | ||
- | ^.name..^.birthday..^ | ||
- | |.山田 太郎..|.平成元年1月1日..| | ||
- | |.伊藤 一..|.平成2年12月31日..| | ||
- | </code> | ||
- | |||
- | ''./lib/plugins/edittable/action/editor.php'' を開き186行目を書き換えます。(プラグインのバージョンによって行番号は変更する可能性があります) | ||
- | |||
- | <code php> | ||
- | //186行目 元の状態 | ||
- | $addpad = $target - $length; | ||
- | |||
- | //↓ | ||
- | |||
- | //186行目 改造後の状態 | ||
- | $addpad = 0; | ||
- | </code> | ||
- | |||
- | ** Center・Left・Rightに表示位置によって自動挿入されるホワイトスペースの数 ** | ||
- | |||
- | 上記の改造と合わせて行えばleft(左寄せ)時には前後のホワイトスペースをゼロにできます。 | ||
- | |||
- | <code> | ||
- | ^name^birthday^ | ||
- | |山田 太郎|平成元年1月1日| | ||
- | |伊藤 一|平成2年12月31日| | ||
- | </code> | ||
- | |||
- | ''./lib/plugins/edittable/action/editor.php'' を開き157行目~167行目を書き換えます。(プラグインのバージョンによって行番号は変更する可能性があります) | ||
- | |||
- | * 中央寄せ時の設定は$lapdと$rpadを2以上の同じ数字にする事。 | ||
- | * 左寄せ時の設定は$lpadは2以上・$rpadは0以上で、$lpadの数字の方が大きい事。 | ||
- | * 右寄せ時の設定は両方とも0か、$rpadの数字の方が大きい事。 | ||
- | |||
- | <code php> | ||
- | //157行目~ 改造前の状態 | ||
- | // minimum padding according to alignment | ||
- | if($meta[$row][$col]['align'] == 'center') { | ||
- | $lpad = 2; | ||
- | $rpad = 2; | ||
- | } elseif($meta[$row][$col]['align'] == 'right') { | ||
- | $lpad = 2; | ||
- | $rpad = 1; | ||
- | } else { | ||
- | $lpad = 1; | ||
- | $rpad = 2; | ||
- | } | ||
- | |||
- | //↓ | ||
- | |||
- | //157行目~ 改造後「もっともスペースを少なくした」状態 | ||
- | // minimum padding according to alignment | ||
- | if($meta[$row][$col]['align'] == 'center') { | ||
- | $lpad = 2; //←中央寄せ時の左のスペースの数 | ||
- | $rpad = 2; //←中央寄せ時の右のスペースの数 | ||
- | } elseif($meta[$row][$col]['align'] == 'right') { | ||
- | $lpad = 2; //←左寄せ時の左のスペースの数 | ||
- | $rpad = 0; //←左寄せ時の右のスペースの数 | ||
- | } else { | ||
- | $lpad = 0; //←右寄せ時の左のスペースの数 | ||
- | $rpad = 0; //←右寄せ時の右のスペースの数 | ||
- | } | ||
- | </code> | ||
- | |||