LoginSignup
3
3

More than 5 years have passed since last update.

ふりがなを正規表現を使って簡単に片付ける方法

Last updated at Posted at 2016-01-12

rubyタグの置き換えめんどい事件

rubyタグを使って、ふりがなを振る必要がありました。
量も膨大ですし、手作業で置き換えるとバグの元なので正規表現を使って置換を試みることにしました。

エディタ

sublime text2

正規表現で置き換え

1.command + alt + Fで置換フォームを表示する
2.置換フォームに以下を入力する
スクリーンショット 2016-01-12 午後8.22.08.png
※左端の正規表現は選択状態にしておくこと

3.Find What:に漢字のJISコードを入れ、( +) で括る。()で括ることによってReplace With:で便利な使い方ができる。

([々〇〻\x{3400}-\x{9FFF}\x{F900}-\x{FAFF}\x{20000}-\x{2FFFF}]+)

4.$1の前後に置換したい文字を入力する。Find What:の括弧が下の用に使用する事ができる。

<ruby><rb>$1</rb><rp>(</rp><rt></rt><rp>)</rp></ruby>

5.replace
ひゃっはー!うまくいったぜぇ!!!
後は手作業。。。この後の効率化の方法求むです m ( _ _ ) m

CSS

cssはタグを上書きしています。(stylusの書き方になります。)

ruby
    display:inline-block !important
    text-align:center !important
    word-wrap:normal !important
    vertical-align: bottom !important

    rp
        display:none !important
    rb
        display: table-row-group !important
        text-align:center !important
        vertical-align:bottom !important

    rt
        display: table-header-group !important
        text-align:center !important
        vertical-align:bottom !important
        font-size:0.3em !important
        line-height:0.3em !important

ふりがなが縦幅を取るのが嫌なので、
rtのfont-sizeとline-heightを小さくしているのがポイントです。
default styleはfont-size:50%のline-height:1だったと思います。

結果

スクリーンショット 2016-01-12 午後8.43.37.png
こんな感じになりました!

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3