読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

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

nehan.js

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

Nehan Reader - Chrome ウェブストア

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

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

f:id:convertical:20160403124812p:plain

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

f:id:convertical:20160403124835p:plain

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

f:id:convertical:20160403124941p:plain

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

f:id:convertical:20160403125137p:plain

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

f:id:convertical:20160403125229p:plain

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

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

になります。

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

nehan.js programming css

pseudo-class

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

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

「〜が」だから、左側のセレクタがマッチする要素です(上の例ではli)。

pseudo-element

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

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

「〜の」だから、左側のセレクタとは 別の element(上の例では::first-letterというelement)にマッチします。

まとめ

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

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

なので最新の仕様では

  • pseudo-classにつくコロンの数は1つ(:first-childとか:last-childとか)
  • pseudo-elementにつくコロンの数は2つ(::first-letterとか::beforeとか)

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

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

余談

ちなみに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!

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

縦書き文庫

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

というわけで、コメントを有効にする場合は、併せてコメント欄のガイドラインを、次の2つの項目について設定できるようになりました。

コメント欄の趣旨・目的

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

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

なので、作者の意図がコメント者に対して事前に伝わるように、コメント欄の趣旨・目的を以下の3つから設定できるようにしました。

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

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

返信ポリシー

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

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

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

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

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

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

設定するとどうなるか

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

f:id:convertical:20160325130452p:plain

まとめ

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

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

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

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

縦書き文庫

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

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

f:id:convertical:20160316214433p:plain

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

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

縦書き文庫

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

f:id:convertical:20160315172530p:plain

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

f:id:convertical:20160315172846p:plain

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

f:id:convertical:20160315172910p:plain

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

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

Nehan Readerにて、背景色が設定できるようになりました

nehan.js

世間の声を聞いていると「白背景のテキストは眩しい」って人が結構いるようです。

というわけで、Nehan Reader ver2.2.38からは、背景色が選べるようになりました。

chrome.google.com

サイドメニューに「Background Color」というメニューが追加されています。

f:id:convertical:20160314194904p:plain

押すとダイアログが開くので、色選択ボタンをクリック。

f:id:convertical:20160314195107p:plain

カラーピッカーが開くので、好みの色を選んで下さい。

f:id:convertical:20160314195247p:plain

試しに灰色の背景にしてみると、こんな感じに。

f:id:convertical:20160314195412p:plain

直感的に素直な感じでカスタムなリストマーカーを作りたい

nehan.js programming

例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforecontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。

ol li:nth-child(1)::before{
  content:'\2460'; /* CIRCLED DIGIT ONE */
}
ol li:nth-child(2)::before{
  content:'\2461';
}
/*
 (3〜9は省略)
*/
ol li:nth-child(10)::before{
  content:'\2469';
}
ol li::before{
  position:absolute;
  margin-left:-2.5rem;
}

しかし、このやり方ではnth-childの数字別にcontentを宣言することになるので、面倒だと思うのです。

もしかしたらcounterみたいなcss内の関数を使って色々できるのかもしれませんが…

nehan.jsを使った場合は、list-style-type関数値を設定することで、動的にunicodeを指定するスタイルがシンプルに記述できます。

Nehan.setStyle(".lst-circled-digit > li", {
  listStyleType:function(ctx){
    var index = ctx.getChildIndex();
    return String.fromCharCode(0x2460 + index);
  }
});

nehan.jsでは、list-style-typeが標準で定義された識別子ではない場合、css値がそのままマーカーとして使われるようになっています。

あるいは、::markerというli直下に差し込まれるpseudo-elementのcontentを動的に設定するやり方もあります。こちらのほうがわかりやすいかもしれませんね。

ただし::markerは公式のcssではまだdraftの扱いです。

Nehan.setStyle(".lst-circled-digit > li::marker", {
  content:function(ctx){
    var index = ctx.getParentStyle().getChildIndex();
    return String.fromCharCode(0x2460 + index);
  }
});

こうした上で、次のようなHTMLを組版させると

<ol class="lst-circled-digit">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ol>

縦書きと横書きで、それぞれ次のように表示されます。

f:id:convertical:20160313220725p:plainf:id:convertical:20160313220734p:plain