CSSの擬似要素を使って改行する

久しぶりの備忘録。面倒なので前置き割愛。

改行コードを直接流し込む

<span class="cr">ピカマンよ</span><span class="lf">ああピカマンよ</span><span class="crlf">ピカマンよ</span><span>by マサラ人</span>

span.cr::after,
span.lf::after,
span.crlf::after {
	white-space: pre;
}

span.cr::after {
	content: "\d";
}

span.lf::after {
	content: "\a";
}

span.crlf::after {
	content: "\d\a";
}

ピカマンよああピカマンよピカマンよby マサラ人

CR(0x0D)やLF(0x0A)といった改行コードを直接入れる。
見ての通り、改行されるのはLFだけで、CRは除去される。*1

また、改行コードだけではHTMLでは改行と認識されない。
その為、white-space: pre;で改行コードを改行として認識させる。

ブロック要素で改行

<span class="br">ピカマンは神です。</span><span>偉い人にはそれがわからんのです。</span>

span.br::after {
	content: "";
	display: block;
}

ピカマンは神です。偉い人にはそれがわからんのです。

擬似要素をブロック要素にすると、そのポイントで強制的に改行できる。

サンプルはafterしか載せてないが、もちろんbeforeでも可能。

…以上。

今日でこのブログを開設してからちょうど半年。
いつからかGoogleのサジェストにもこのブログ名が載るようになった。
こんな辺境の地(ブログ)に訪問するなんて、みんな物好きだよねぇ。。

*1:但しIE9のみ例外で、CR単体でも改行として認識する。

Firefox29の改悪が酷いのでCyberfoxに完全に乗り換えた

Firefox 29で大幅にUIが改悪された。
29でこうなることは前から知ってたが、遂に来てしまったという絶望感がヤバイ。
とにかく使いづらい。

CTR（Classic Theme Restorer）で今までの見た目に直そうと頑張ってみた結果がこれ。

歌詞サイトに親を殺された系ブラウザ

Waterfoxに引き続き雑談パート2。

Waterfoxメモリ食いすぎ。

備忘録ばっかで飽きてきたので久々の雑記。（というか雑談）

プログラムというのは連続して使えば使う程メモリを食う。
使用頻度の高いブラウザがまさにそうで、その中でも特にFirefoxはメモリの食い方が荒い。

そのFirefoxの派生で64bitネイティブのWaterfoxを約4時間連続して使い続けた結果がこれ。

pixivのプロパティまとめ（JavaScript）

いつもの誰得備忘録。

pixivは一部のページ*1を除き、ほぼ全てのページでjQuery(1.8.3)を読み込んでいる。

jQueryが読み込まれているページでは同時に
グローバル空間にpixivという名の連想配列（window.pixiv）がセットされており、
この中にUIを操作する為のメソッドと各種情報が色々詰まってる。

その内、メソッド（関数）以外で割と使えそうなのを一通りメモっとく。
（関数は数がハンパなく多く動作確認面倒なので気になるなら各自確認してくれ）
（私はROM専なので投稿周りはほとんど分からん。誰か情報プリーズ）

*1:イラストや漫画などでオリジナルサイズを表示した際の画像単体表示ページ等