2017-04-03

縦書き文庫のビューアーがテキストファイルのドラッグ＆ドロップに対応しました

縦書き文庫

縦書き文庫のビューアーでドラッグ＆ドロップしたテキストファイルが読めるようになりました。

適当な作品を開いて、小説本文の領域にテキストファイルをドロップすると、原稿フォーマットや文字コードを聞かれるので、適切なものを選択してください。

f:id:convertical:20170405092104p:plain

「決定」を押すと、テキストの内容が縦書き文庫のビューアーで表示されます。

2017-02-25

Responsivook ver1.2.2をリリース

nehan.js responsivook

Responsivook ver1.2.2をリリースしました。

Responsivookはnehan.jsを使って、縦書き横書きのページ送り、段組み、レスポンシブレイアウトなどを実現するjavascriptライブラリです。

動作デモ

主な変更点

Windowsの場合に縦書きのベースラインがずれてしまっていた問題が修正されました。
ボットによるアクセスのときは組版せずに平文のまま表示するようにしました（SEO対策）。

2017-02-16

nehan.jsのfunctional styleでタグの内容に動的な制限をつける

nehan.js 縦書き文庫

縦書き文庫では比較的自由にHTMLタグを使用できるのですが、たまにエディターの文字サイズ変更ボタンをテキスト全体に反映させてしまう人がいます。

例えばこういう感じです。

<span class='larger'>
（作品全体のテキスト）
</span>

これの何が困るのかというと、ユーザーが「表示設定」で変更できるはずのフォントサイズが、内側のspanに邪魔されて変更できなくなくなってしまうことです。

縦書き文庫では、ユーザーの表示環境やパソコンの解像度はそれぞれ異なることを踏まえ、それぞれの環境にあわせてビューアーのサイズや文字サイズが変わるようになっています。

その上で、各種サイズは各自が自分好みに設定できるようにしているので、その特徴を破壊するようなマークアップは、あまり望ましくありません。

よって注意事項でも、そういうマークアップを禁止行為であると明記しているのですが、こういう規則って読む人が少ないので、あんまり周知されていないというのが実情です。

というわけで、少し強引なのですがnehan.jsのfunctional styleを使って、良くない装飾タグの使い方には、動的な警告を出すようにしてみました。

例えば、部分的なテキストの装飾に使われるspanタグならcontentを以下のように設定し、制限字数を超えていたらエラーメッセージに置き換えます。

Nehan.setStyle("span", {
  content:function(ctx){
    var limit = 100; // 制限字数
    var cont = ctx.getMarkup().getContent();
    return (cont.length > limit)? "error:too long!!" : cont;
  }
});

色々なタグにまとめて長さ制限を付けたいときは、こんな感じでしょうか。

// 動的にcontent制限するstyle valueを作成する関数
var content_with_limit = function(limit){
  return function(ctx){
     var cont = ctx.getMarkup().getContent();
     return (cont.length > limit)? "error:too long!!" : cont;
  };
};

// 長さ制限を付けるタグ一覧
var LIMIT_LENGTH = {
  b:100,
  em:30,
  span:50,
  strong:100
};

Object.keys(LIMIT_LENGTH).forEach(function(tag_name){
  var limit = LIMIT_LENGTH[tag_name];
  
  Nehan.setStyles(tag_name, {
    content:content_with_limit(limit)
  });
});