段落の先頭に自動で空白を入れる

サッカーのページを見ていたら、サイドメニューあった「ストレスと友達になる方法」というリンクが「スアレスと友達になる方法」に見えてしまいました。

ストレスともスアレスとも友達になれそうにない自分ですが、せめて段落の先頭に自動で空白を入れるぐらいのことはできるのではないか…

ということで、以下は「Pタグで表現された段落なら、自動で空白を埋め込む」スタイル設定です。

サンプル1

まずはシンプルに文字を注入する方法です。

{
  p:{
    onload:function(ctx){
      var markup = ctx.getMarkup();
      var content = markup.getContent();
      var head_char = new Nehan.Char(content.substring(0,1));

      // 先頭が全角スペース、カッコ開始、その他の特殊スペースじゃない
      if(!head_c1.isIdeographicSpace() && 
         !head_char.isKakkoStart() && 
         !head_char.isSpace()){
          // 先頭に全角スペースを注入
          markup.setContent("　" + content);
      }
    }
  }
}

よりちゃんと動かすためには「先頭がタグ開始文字だったらスキップして、本当の先頭文字を取りに行く」という処理が必要ですが、ほとんどの場合において、正しく動くでしょう。

サンプル2

ついでに、別のやり方も紹介しておきます。

以下は、pseudo-elementのfirst-letterを使う方法です。

{
  "p::first-letter":{
    display:"inline",
    padding:function(ctx){
       var letter = ctx.getMarkupContent().substring(0,1);
       var chr = new Nehan.Char(letter);
       if(!chr.isIdeographicSpace() && !chr.isKakkoStart() && !chr.isSpace()){
         return {start:"1em"};
       }
       return null;
     }
  }
}

こういう自動処理は、サービス側で用意してもいいのですが、ユーザーに制御する自由があると、より小回りがきくと思います。