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

例えば標準で用意されていないリストマーカーを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にて、オプションからフォントを自由に設定できるようになりました。

Nehan Readerのversion 2.2.37より、オプションからフォントを自由に設定できるようになりました。

Nehan Reader - Chrome ウェブストア

「涅」のボタンを右クリックして「オプション」へと進んでください。

以下のように、cssのfont-familyの値をダイレクトに設定できます。

設定すると、常にこの値が使用されるようになるため、右メニューにあった「明朝」とか「ゴシック」の設定スイッチが表示されなくなります。

設定値を空白に戻すと、また有効になります。

シリーズ内の作品が並び替えられるようになりました

シリーズは基本的に作品を古い順に表示していたのですが、この順番を自由に並べ替えられるようになりました。

シリーズ一覧の「並び替え」から順序を変更できます。

小説家になろうとカクヨムのテキストを縦書きページ送りで表示する

Nehan Reader（ver2.2.35）をリリースしました。

実はMacでしか確認していないので、Windowsで読みにくくなってるかも。もしそうなら、どんな状態か教えてくだされば善処します。

[2017/01/24追記] Windowsで表示が崩れる問題が修正されました！

chrome.google.com

Nehan Readerを使うと、例えばWikipediaなんかも、こんな感じで縦書きに。

もちろん横書きにすることもできます。

横書きの場合は「見開き」にすると読みやすいかも（設定から Two Page Spreads を選択）。

更新内容

小説家になろうやカクヨムといったサイトの場合は、特別に幾つかのスタイルを設定するように修正しました。

• 間に入る空白行が詰めて表示されるようになりました。
• どちらのサイトも（理由はよくわかりませんが）タイトルやサブタイトルなどにヘッダータグが使われていないので、これらをヘッダ扱いしてテキスト内の目次として表示させるようにしました。

余談

カクヨムの段落は、それぞれに固有のidが割り振られているのが興味深いです。

ひょっとしたら段落別のフィードバック機能を考えているのかも？

実は自分もそういう機能を実装したことがあるのですが、あんまり利用してもらえなかったのは苦い思い出…

そういえばMediumも、いつのまにか段落コメントじゃなくなってる気が。なにかあったんでしょうか？

シリーズの目次とテキスト内の目次

シリーズの目次と、テキスト内の目次が、両方サイドバーに表示されるようになりました。

シリーズの目次

シリーズの目次は、同一シリーズ内のコンテンツを行き来するための目次です。

テキスト内の目次

テキスト内の目次は、本文の中で見出し（ヘッダー）が設定された箇所にジャンプするための目次です。

シリーズの目次とは違い、クリックするとその見出しのあるページにジャンプします。

数式の組版に対応しました

まだ実験的な機能なのですが、数式の組版に対応しました。

使い方

エディター画面の「数式」をクリックします。

数式エディターが開くので、MathJax形式で入力します。

プレビューすると、こんな風に表示されます。

横書きのとき

縦書きのとき

数式の書き方について

詳しくはMathJaxのドキュメントを見ていただくとして、大雑把に言うと\[ 〜 \] で囲むか、$$ 〜 $$ で囲みます。

$$ E = mc^2 $$
\[ e^{i\theta} = \cos\theta + i\sin\theta \]

数式を組み込むと、MathJaxの組版が完了するまで、先頭ページの表示が少し遅くなります。ご注意ください。

作品ページから執筆ページに移動できるようになりました

作品ページから執筆ページ（エディターページ）に移動できるようになりました。

自分の作品であれば、タイトル脇に「編集する」というボタンが表示されます。

nehan.js 5.5.0

nehan.js 5.5.0をリリースしました。

github.com

以下、5.4.x系列からの変更点です。

変更点

• pseudo-classの:matches, :not, :langをサポートしました。
• MathJaxを試験的にサポートしました。demo
• サロゲートペアに対応しました。これにより、emoji等が文字化けせず、そのまま出力できるようになりました。demo
• ブラウザがサポートしてる場合は、ネイティブなtext-combine-uprightが使用されるようになりました。demo
• text-orientationの値にsideways, upright, mixedが指定できるようになりました。demo
• list-style-positionの値に、insideが指定できるようになりました。
• cssのfont値をshorthand形式でも指定できるようになりました。
• Nehan.Preloadsモジュールの追加。サイズ未設定のimgやmathなどのサイズが動的に取得されるようになりました。
• selector-keyの値に関数を指定した場合、当該セレクタのonloadフックとして評価されるようになりました。
• nehan.jsによる組版から除外して、外部ソースをそのまま取り込むための属性値の名前がpastedからlazyに変更されました。
• Nehan.PagedElementが削除されました。今後はNehan.Documentを使用して下さい。
• Nehan.LexingRuleが削除されました。今後、シングルタグの定義にはNehan.setSingleTagNameを使用して下さい。
• Nehan.Rgb, Nehan.Palette, Nehan.Colorsモジュールが削除されました。

Nehan.PagedElementの削除について

v5.5.0から、Nehan.PagedElementが削除されました。

これの中身は、単なるNehan.Documentのラッパで、やってることはページ状態と表示先DOMをDocumentクラスと一緒に管理しているだけのものです。

Nehan.Documentと役割が被ることが多いので、今回のバージョンアップで削除してしまうことにしました。

MathJaxについて

MathJaxのサポートですが、現時点では本ソースへの取り込みではなく、プラグインでの対応です。

詳しくは以下のリンクから確認して下さい。

https://github.com/tategakibunko/nehan.js/tree/master/plugins