anti scroll

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

nehan.js

Responsivook ver1.2.2をリリース

Responsivook ver1.2.2をリリースしました。 Responsivookはnehan.jsを使って、縦書き横書きのページ送り、段組み、レスポンシブレイアウトなどを実現するjavascriptライブラリです。 動作デモ 主な変更点 Windowsの場合に縦書きのベースラインがずれてしま…

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

縦書き文庫では比較的自由にHTMLタグを使用できるのですが、たまにエディターの文字サイズ変更ボタンをテキスト全体に反映させてしまう人がいます。 例えばこういう感じです。 <span class='larger'> (作品全体のテキスト) </span> これの何が困るのかというと、ユーザーが「表示設定」…

縦書き文庫の組版スピードを計測するページを公開しました

縦書き文庫の組版スピードを計測するページを公開しました。 縦書き文庫 - 組版スピードテスト ハイスコアも計測されますので、ご自身のブラウザのスピードを試してみたい方は使ってみてください。 ちなみに以下は自分の環境で計測した結果で、Safariが圧倒…

Nehan Readerをスマホにも対応させました

NehanReaderをスマホにも対応させました。 chrome.google.com しかし! 残念ながら(2017年2月現在)、AndroidもiOSも共にChrome拡張はサポートされていないとのこと(リリース後に知りました…)。 スマホ版のChromeが拡張機能に対応していない理由は、おそ…

Nehan Reader更新。Windows環境にて行がガタついていた問題が修正されました

あらゆるウェブサイトを縦書き(や横書き)のページ送りにできるChrome拡張「Nehan Reader」を更新しました。 Nehan Reader - Chrome ウェブストア 前々から「Windows環境下にて行のガタ付きが発生している」との報告は上がっていたのですが、ようやく修正で…

わかち書き用の設定

nehan.jsの多言語対応で、マラヤーラム語に対応したいというメールがあったので、わかち書き用の正規表現パターンを外部から設定できるようにしました。 // デフォルトの設定 Nehan.Config.rexWord = /^[\u0021-\u0025\u0027-\u003A\u003C-\u007E\u00C0-\u02…

はてなブログをレスポンシブな縦書きにする

Responsivookを使うと、はてなブログをこんな感じでレスポンシブな縦書きにできます。レスポンシブなので、ブラウザのサイズを変えても、自動で対象領域がリサイズします。 ページ送りで表示する 日本国民は、正当に選挙された国会における代表者を通じて行…

古いバージョンのnehan.jsを使っている人たちへ

Google Codeというサービスの閉鎖に伴い、Google Code上に置かれていたソースに直リンする形のテンプレートやプログラムが動かなくなっているようです。 そこで、古いソースをまとめたrepositoryを作りました。 github.com rawgitを使って、CDN化した各バー…

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

Responsivookは、nehan.jsを使ってレスポンシブな縦書きページ送りを表示するjavascriptですが、version1.2.0から段組の表示もできるようになりました。 サンプルを見る Responsivook version1.2.0のダウンロード 一つのページ上で縦書きと横書きのページ送…

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

NehanReader(v2.4.3)より、設定から「見開きレイアウト」を選択できるようになりました。 Nehan Reader - Chrome ウェブストア PCのディスプレイは横に長いので、横書きは見開きのほうが読みやすいかもしれません。 例えばWikipediaを見開きで表示すると、こ…

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は、左側のセレク…

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

世間の声を聞いていると「白背景のテキストは眩しい」って人が結構いるようです。 というわけで、Nehan Reader ver2.2.38からは、背景色が選べるようになりました。 chrome.google.com サイドメニューに「Background Color」というメニューが追加されていま…

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

例えば標準で用意されていないリストマーカーをUnicodeなんかで作りたいとき、以下のようにli::beforeにcontentを設定してマイナスのマージンをセットする、みたいなやり方がよく知られています。 ol li:nth-child(1)::before{ content:'\2460'; /* CIRCLED …

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.goog…

nehan.js 5.5.0

nehan.js 5.5.0をリリースしました。 github.com 以下、5.4.x系列からの変更点です。 変更点 pseudo-classの:matches, :not, :langをサポートしました。 MathJaxを試験的にサポートしました。demo サロゲートペアに対応しました。これにより、emoji等が文字…

Unicode Hyphen覚え書き

例えばHTMLで「F-15」のような「-」(ハイフン)を含むboxを90度回転して表示させようとすると、ハイフンの後で改行されてしまいます。 なぜこんなことが起きてしまうのでしょうか。 理由 フォントサイズが16と仮定して「F-15」という横書きのwordを囲むサイ…

Nehan Reader version2.1リリース。自動で変換するサイトを指定できるようになりました。

Nehan Reader(version 2.1)をリリースしました。 chrome.google.com オプションページにて、 自動的にNehan Readerを起動するURL(パターン) URL(パターン)毎の変換対象に指定する部分 などが設定できるようになりました。 ちなみに「小説家になろう」と…

CSSとDOMの境界、あるいはリスト組版がテーブル組版の親戚である件について

http://tb.antiscroll.com/static/nehan-demo#list このデモですけど、ブラウザの大きさを変えると、リフローすることに気付いた人はいるでしょうか。 こういうデモで、テーブル組版や回り込み処理を見せると「おお」となる人が多いんですけど、リスト組版を…

nehan.js version5.4.0のリリース

nehan.js 5.4.0をリリースしました。 github.com このバージョンから新しく追加された機能や、5.3.x系から消えた機能などがいくつかあるので、ご注意下さい。 変更点 Nehan.Documentが新たに定義されました。 onPageコールバックがサポートされました。 Neha…

nehan.jsでSemantic UIのようなヘッダースタイルを設定する

人気のCSSフレームワーク「Semantic-UI」ですが、ヘッダーの設定はこんな感じになっています。 .ui.header{ margin: calc(2rem - 0.14285em) 0em 1rem; } 各ヘッダー内での文字サイズ(em)と、bodyの文字サイズ(rem)を使って計算しています。 同じことをnehan…

Firefoxでもversion41以降で縦書き字形が表示されるようになりました

昨日リリースされたFirefoxのversion41から縦書きの字形が出力できるようになりましたので、縦書き文庫とnehan.jsもこれに対応しました。 これまでFirefoxのときだけ、一部の文字を画像で代替表示する処理をしていたのですが、これからはそれらがちゃんとし…

nehan.jsのセレクターマッチング処理を高速化

nehan.jsのセレクタのマッチング処理を高速化しました。 先日サポートした行末揃えは、有効にすると20%ほど遅くなりましたが、今回の修正によって15%ほど速くできたので、少し戻すことができました。 前々から、機会があったらやっておこうと思っていた処理…

text-align:justify に対応

nehan.jsが、text-align:justifyに対応しました。 縦書き文庫では既に、ビューアーのbodyに対してjustifyが設定されています。 これを設定すると、例えば行末に赤い部分のような微妙なスペースがあっても… 揃えた後はこんな風に、行末が揃います。 あらゆる…

nehan.jsが複数ページに渡る論理的な回りこみ処理(論理フロート)の解除に対応しました。

リポジトリ上のnehan.jsで、論理的な回りこみ処理(論理フロート)の解除を実装しました。 回り込みを解除するスタイル設定ですが、通常のcssでは、 .clear-left{ clear:left } .clear-right{ clear:right } .clear-both{ clear:both } などと書くところです…

縦書き横書きの自動リサイズに対応したページ送りのビューアー「responsivook」

縦書き横書きの自動リサイズに対応したページ送りのビューアーを公開しました。 github.com ブログやホームページに簡単に埋め込むことができます(たぶん)。 デモ デモページを用意しました。 Responsivook demo 上のページで、ウインドウをリサイズしてみ…

textNodeの出力オプションを追加

2chからのアクセスに、珍しくリファラが付いてたので、元スレを覗いてみたのですが、縦書き文庫に投稿された作品へのリンクに「踏まないほうがいいよね?」ってレスが付いていて、地味に傷ついたのでした。 capturePageTextオプション それはさておき、表題…

段落の先頭に自動で空白を入れる

サッカーのページを見ていたら、サイドメニューあった「ストレスと友達になる方法」というリンクが「スアレスと友達になる方法」に見えてしまいました。 ストレスともスアレスとも友達になれそうにない自分ですが、せめて段落の先頭に自動で空白を入れるぐら…

スタイル編集機能で、プログラマブルな小説投稿

新たにスタイル編集ページを追加しました。 詳しくは縦書き文庫のヘルプから「スタイル編集」のページを確認して下さい。 注意事項 スタイルはcssではなく、JSON形式で宣言します。 { ".foo":{ margin:{ after:"1em" } }, "span.fuga":{ "font-size":"2em" /…