Responsivookで段組をサポートしました

Responsivookは、nehan.jsを使ってレスポンシブな縦書きページ送りを表示するjavascriptですが、version1.2.0から段組の表示もできるようになりました。

サンプルを見る

Responsivook version1.2.0のダウンロード

一つのページ上で縦書きと横書きのページ送り＆段組が共存できて、すべて画面サイズに合わせて表示が更新されます。

使い方

段組表示する場合はthemeにdangumiを指定します。

ページ送りで表示する場合はthemeにbookを指定します。

以下はサンプルです。

document.addEventListener("DOMContentLoaded", function(event){
  // 縦書きページ送り
  Responsivook.start(".post-content.tb-rl.book", {
    theme:"book",
    flow:"tb-rl"
  });
  // 縦書き段組
  Responsivook.start(".post-content.tb-rl.dangumi", {
    theme:"dangumi",
    flow:"tb-rl"
  });
  // 横書きページ送り
  Responsivook.start(".post-content.lr-tb.book", {
    theme:"book",
    flow:"lr-tb"
  });
  // 横書き段組
  Responsivook.start(".post-content.lr-tb.dangumi", {
    theme:"dangumi",
    flow:"lr-tb"
  });
});

表示オプション

フォントやサイズなどといった表示オプションの詳細については、以下を参照して下さい。

https://github.com/tategakibunko/responsivook

jingoo v1.2.13 release

jingoo version 1.2.13 をリリースしました。

https://github.com/tategakibunko/jingoo/releases/tag/v1.2.13

前々から「UTF8モジュールのためにBatteriesは大きすぎる」という声が多かったので、それに応えてuutfというライブラリを採用したPull Requestを取り込みました。

https://github.com/dbuenzli/uutf

uutfはopamからじゃないとインストール出来ないのですが、事情があってopamを使えない人は、Makefileを付与したものを自分がforkしてるので、よかったら使って下さい。

https://github.com/tategakibunko/cmdliner

https://github.com/tategakibunko/uutf

ちなみにcmdlinerは、uutfの依存パッケージです。先にcmdlinerをインストールしてから、uutfをインストールして下さい。

どちらのパッケージも、srcディレクトリに入って、make; make installでいけますが、ポータビリティは考慮してないので、問題があるようならMakefileを編集して下さい。

NehanReaderで見開き表示をサポートしました

NehanReader(v2.4.3)より、設定から「見開きレイアウト」を選択できるようになりました。

Nehan Reader - Chrome ウェブストア

PCのディスプレイは横に長いので、横書きは見開きのほうが読みやすいかもしれません。

例えばWikipediaを見開きで表示すると、こんな風に。

青空文庫だとこんな感じ。

あんまり意味はありませんが、縦書きを見開きにすると、こんな感じ。

見開きレイアウトを有効にするには、上部のメニューバーにある「設定ボタン」を押して…

設定項目の中から「Two Page Spreads」を選択します。

ちなみにショートカットキーも用意されていて、

• 1キーを押すとシングルページレイアウト
• 2キーを押すと見開きレイアウト
• vキーを押すと縦書き表示
• hキーを押すと横書き表示

になります。

Nehan Reader 2.4.0をリリース

Nehan Reader2.4.0をリリースしました。

chrome.google.com

各種メニューをヘッダーにまとめることで、コンテンツ領域を広げました。

メニューは左から「表示設定」「目次」「しおり」「ヘルプ」です。

10秒でわかるpseudo-classとpseudo-elementの違い

pseudo-class

pseudo-classは、左側のセレクターに続けて「〜が」と読みます。

/* liが最初の子だった場合 */
li:first-child{
  margin-top:0;
}

「〜が」だから、左側がマッチする要素です（上の例ではli）。

pseudo-element

pseudo-elementは、左側のセレクターに続けて「〜の」と読みます。

/* liの先頭文字 */
li::first-letter{
  font-size:3em;
}

「〜の」だから、右側がマッチする要素です（上の例では::first-letter）。

まとめ

どちらもpseudoと付いていますが、全く性質の異なるものです。

しかし古い仕様ではコロンがどちらも１つで記述されていて（例えば:first-letterとか）、紛らわしいという問題がありました。

なので最新の仕様では

• pseudo-classにつくコロンの数は１つ（:first-childとか:last-childとか）
• pseudo-elementにつくコロンの数は２つ（::first-letterとか::beforeとか）

というのが、正式な文法となっています。

ただし古いCSSと互換性を保つために、大体のブラウザではコロン１つでも通るようになっています。

余談

ちなみにnehan.jsの場合、コロンの数は厳密に区別します。

つまり::first-letterとすべきところを:first-letterと書いてしまうと、単に「未定義のpseudo-class」と見なされてしまいます。

Nehan.setStyle(".foo:first-letter", {fontSize:"3em"}); // NG（未定義のpseudo-class）
Nehan.setStyle(".foo::first-letter", {fontSize:"3em"}); // OK!

コメント欄のガイドラインを設定できるようになりました

コメント欄については、ほとんどの人が有効にしていますが、どういう意図で有効になっているのかが、わかりにくいなあと思っていました。

というわけで、コメント欄のガイドラインを、次の２つの項目について設定できるようにしました。

1. コメント欄の趣旨・目的

人によっては、読者との交流を目的にしていて、真剣過ぎる批評批判は求めていなかったりします。

またある人は、具体的な批評批判のみを求めている場合があります。

そこで、コメント欄の趣旨・目的を、以下の３つから設定できるようにしました。

1. 交流
2. 批評批判
3. 未設定

デフォルトの設定は「未設定」です。

2. 返信ポリシー

作者がコメント者に対し「返信をする意図があるのかないのか」を明らかにするための項目です。

なぜこんなものが必要なのかというと、コメント者の中には「あれ、返事がない？ 怒らせてしまったのかな…」と不安に思う人もいるはずだからです。

しかし、事前に返信ポリシーが明らかになってさえいれば、そうしたすれ違いもなくなるのではないでしょうか。

返信ポリシーは、以下の３つから選択できます。

1. なるべく返信
2. 返信はしない
3. 未設定

デフォルトの設定は「未設定」です。

設定するとどうなるか

例えば趣旨を「批評批判」にして、返信ポリシーを「返信できない」に設定すると、コメントフォームの上部に、次のようなコメントポリシーが表示されます。

まとめ

コミュニケーションの齟齬は、情報不足から来ることがほとんどなのではないでしょうか。

コメント者からすれば、作者の意図がわかって困ることは何もありません。

もしコメント欄に、ある種の意図を持っているのでしたら、積極的に活用することをお勧めします。

モバイル版のエディターにもルビや圏点用のボタンを付けました

モバイル版のエディターにも、ルビや圏点などのボタンを付けました。

画面サイズの制限もあるので、４つしか入れられませんでしたが…

左から順に「太字」「ルビ」「改ページ」「圏点・傍点」になります。

一行の幅を設定できるようになりました

表示設定から一行の幅が設定できるようになりました。

例えば標準の2.0で表示するとこんな感じですが…

1.8ぐらいに狭めるだけで、同じサイズでも随分と文字が入ります。

初期設定は2.0（最大）で、1.5まで狭めることができます。

自分は詰め詰めの表示だと目が疲れてしまうので、最大の2.0を使用しているのですが、情報量が多いのが好きな人は、小さくすると捗るかもしれません。