NehanReader(v2.4.3)より、設定から「見開きレイアウト」を選択できるようになりました。
PCのディスプレイは横に長いので、横書きは見開きのほうが読みやすいかもしれません。
例えばWikipediaを見開きで表示すると、こんな風に。
青空文庫だとこんな感じ。
あんまり意味はありませんが、縦書きを見開きにすると、こんな感じ。
見開きレイアウトを有効にするには、上部のメニューバーにある「設定ボタン」を押して…
設定項目の中から「Two Page Spreads」を選択します。
ちなみにショートカットキーも用意されていて、
1キーを押すとシングルページレイアウト2キーを押すと見開きレイアウトvキーを押すと縦書き表示hキーを押すと横書き表示になります。
Nehan Reader2.4.0をリリースしました。
各種メニューをヘッダーにまとめることで、コンテンツ領域を広げました。
メニューは左から「表示設定」「目次」「しおり」「ヘルプ」です。
pseudo-classは、左側のセレクターに続けて「〜が」と読みます。
/* liが最初の子だった場合 */ li:first-child{ margin-top:0; }
「〜が」だから、左側がマッチする要素です（上の例ではli）。
pseudo-elementは、左側のセレクターに続けて「〜の」と読みます。
/* liの先頭文字 */ li::first-letter{ font-size:3em; }
「〜の」だから、右側がマッチする要素です（上の例では::first-letter）。
どちらもpseudoと付いていますが、全く性質の異なるものです。
しかし古い仕様ではコロンがどちらも１つで記述されていて（例えば:first-letterとか）、紛らわしいという問題がありました。
なので最新の仕様では
というのが、正式な文法となっています。
ただし古い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!
世間の声を聞いていると「白背景のテキストは眩しい」って人が結構いるようです。
というわけで、Nehan Reader ver2.2.38からは、背景色が選べるようになりました。
サイドメニューに「Background Color」というメニューが追加されています。
押すとダイアログが開くので、色選択ボタンをクリック。
カラーピッカーが開くので、好みの色を選んで下さい。
試しに灰色の背景にしてみると、こんな感じに。
例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforeにcontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。
ol li:nth-child(1)::before{ content:'\2460'; /* CIRCLED DIGIT ONE */ } ol li:nth-child(2)::before{ content:'\2461'; } /* （３〜９は省略） */ 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>
縦書きと横書きで、それぞれ次のように表示されます。
Nehan Readerのversion 2.2.37より、オプションからフォントを自由に設定できるようになりました。
「涅」のボタンを右クリックして「オプション」へと進んでください。
以下のように、cssのfont-familyの値をダイレクトに設定できます。
設定すると、常にこの値が使用されるようになるため、右メニューにあった「明朝」とか「ゴシック」の設定スイッチが表示されなくなります。
設定値を空白に戻すと、また有効になります。
Nehan Reader（ver2.2.35）をリリースしました。
実はMacでしか確認していないので、Windowsで読みにくくなってるかも。もしそうなら、どんな状態か教えてくだされば善処します。
[2017/01/24追記] Windowsで表示が崩れる問題が修正されました！
Nehan Readerを使うと、例えばWikipediaなんかも、こんな感じで縦書きに。
もちろん横書きにすることもできます。
横書きの場合は「見開き」にすると読みやすいかも（設定から Two Page Spreads を選択）。
小説家になろうやカクヨムといったサイトの場合は、特別に幾つかのスタイルを設定するように修正しました。
カクヨムの段落は、それぞれに固有のidが割り振られているのが興味深いです。
ひょっとしたら段落別のフィードバック機能を考えているのかも？
実は自分もそういう機能を実装したことがあるのですが、あんまり利用してもらえなかったのは苦い思い出…
そういえばMediumも、いつのまにか段落コメントじゃなくなってる気が。なにかあったんでしょうか？
nehan.js 5.5.0をリリースしました。
以下、5.4.x系列からの変更点です。
:matches, :not, :langをサポートしました。text-combine-uprightが使用されるようになりました。demotext-orientationの値にsideways, upright, mixedが指定できるようになりました。demolist-style-positionの値に、insideが指定できるようになりました。Nehan.Preloadsモジュールの追加。サイズ未設定のimgやmathなどのサイズが動的に取得されるようになりました。onloadフックとして評価されるようになりました。pastedからlazyに変更されました。Nehan.PagedElementが削除されました。今後はNehan.Documentを使用して下さい。Nehan.LexingRuleが削除されました。今後、シングルタグの定義にはNehan.setSingleTagNameを使用して下さい。Nehan.Rgb, Nehan.Palette, Nehan.Colorsモジュールが削除されました。v5.5.0から、Nehan.PagedElementが削除されました。
これの中身は、単なるNehan.Documentのラッパで、やってることはページ状態と表示先DOMをDocumentクラスと一緒に管理しているだけのものです。
Nehan.Documentと役割が被ることが多いので、今回のバージョンアップで削除してしまうことにしました。
MathJaxのサポートですが、現時点では本ソースへの取り込みではなく、プラグインでの対応です。
詳しくは以下のリンクから確認して下さい。
https://github.com/tategakibunko/nehan.js/tree/master/plugins
