横のものを縦にする
小説なんかはやっぱり縦書きじゃなきゃいけないのだ。
てことで、テキストファイルを縦書きで表示するスクリプトをでっちあげてみた。…って、この手のスクリプト、編集時代にいくつか使い捨てで食い散らかすように作ってあって、探してみたら、中には字数行数のフォーマットに合わせて文章を流し込むように仕込んであるやつまであった。
しかし、残念ながら、5分前の自分はもう他人、5年も前の自分などまったく記憶になく、スクリプトを見てもよくわからんので、無駄だと思いつつ１から作ってみた。
ttp://www.holeinthewall.jp/~butch/zakki/tate.pl
点丸の句読点は代替のものに置換したけど、三点リーダーやかっこ類は代替が見当たらず、cssで回転させて基点を少し調整した、のでFireFox、Safari（Chrome）限定で、IEはダメ。
とりあえずの初校版、だ。もう少しちゃんと使える・見られるシロモノにして公開します。きっと。
青空文庫のテキストも縦書きでディスプレイで読めるな。
[12/02 23:44:20]
ふぁっきんIEはfilterを使えば文字の回転ができるのか。てことで、IEでも記号は回転させてみた。
JSONでデータを渡して、javascriptでページ送りすれば、それっぽくなるなあ、と追加してみた。
ページ送りの見た目に、display:table とか display:table-cell なんて呪文があったのか。てことでふたたび、IE7以前は却下となる。
で、さらに、縦書き文庫というかなりイケてるサイトを発見。
https://tategakibunko.mydns.jp/
ルビにまで対応していて気合の入り方がハンパじゃないし、いまどき。てことで、わざわざ凝ったものを作る必要を感じられなくなった。ちゃちゃっとそれっぽくそれなりに縦書きになって、自分のサイトにちょろっと貼り付けられる、というポジションでOKだな。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
flashに z-index
今さらだけど、メモっておこう。
Flashの領域って、前へ前への自己主張。z-indexで後ろに下げようと思っても、画面一番前面に居座って後ろに下がってくれない。なんじゃそりゃ。
param に wmode=transparent を指定すると、z-indexが効く。Flashの上にかぶせることができるようになる。注意点もあるらしいけど、上に文字を重ねたいだけなのでこれでOKだ。
ゆうべ、一の蔵とワインを飲みすぎた、らしく、今日は夕方までのたうつように転がるしかできなかった。とほほ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
IE8で表示がバグってた
読書SNSの本棚のタブメニューがIE８で表示バグ。いや、気づいてたんだけど、IEなんてもうイラね、と放置。
タブメニューが４つほどあって、その各々でやることが違う＝コンテンツ量が違うので、コンテンツ部分のdiv要素の高さが違う。
これをjavascriptで display:block noneを切り替えるわけだが。
FireFox、Safari、IE7は意図どおり、コンテンツ部分の高さに合わせて、親要素の高さを広げてくれるんだけど、IE8はコンテンツ部分の高さを広げてくれない。ケイ囲み（親要素）からべろ～んとコンテンツがはみ出してみっともないったらありゃしない。floatした子要素の高さを親要素に伝えるためのハックをスタイルシートには適用してあるんだけど、なんでやねん、と。ごそごそスタイルシートをいじったりHTMLに直接styleを埋め込んでみても、ちっともいうことを聞きやがらず、すっかり放置だった。
朝から団地の掃除、イトーヨカドーの特売、と地域密着活動の合間を縫って、見直してみた。結果。
javascriptで切り替えるときに、親要素もいじれば意図どおりになった。
id.style.display='none'
id..parentNode.style.display='none'
id..parentNode.style.display='block'
id.style.display='block'
IE8はけっこうまともという話なので、本来こうすべきところ、なのかな。
ちなみに、
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
こんなのヘッダに入れると強制的にIE7互換表示モードにしてくれるんだけど、このIE７互換がいい加減っぽくて、本当のIE7と表示が違ってたりするんで困ったちゃんでした。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
validator W3C原理主義
妙に冷える東京の週末だ。
W3Cに準拠したタグ付け、意味をしっかり把握して構成していくべきである、のはよくわかるんだけど、教条主義原理主義になってもしょうがない。
ある程度把握した上で、テキトーにやりやすいようにやって、まずは形すること優先。最初から100%の完成なんてありえない。晒してナンボ。じゃねえの。
てことで、ふとfirefoxのvalidatorに、この雑記帖をかけてみたら、エラーと警告が出やがるのは周知の承知。しょうがないんで、久しぶりにココのスクリプトを修正して、とりあえずエラーが出ないようにしてみた。けど、javascriptで警告が残るし、adsenseでエラーが出る…ので、もりもりやる気が失せて雑記帖とお言葉データベースだけ修正して終了。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
スクロールバーでセンタリングがズレる
~butch/zakki/ 以下は同じフレーム同じ雛形なのに、FireFoxで見てると、ページによってはセンタリングがずれてページがピコっと動くことがあって、気持ち悪かった。cssを疑ってピクセル指定しなおしたりしても変わらず。
ググれ、カス。
だった。検索したらあっさり見つかった。
FireFoxなど、タテスクロールが起こる場合にだけスクロールバーが現れるので、スクロールバーの幅の分横幅が変わって、センタリングのやり直しになるから、ズレる。なので、最初からどのページもスクロールバーが出てればいい、らしい。定番は以下。
html ｛｝ に、height:100% margin-bottom:1pxを指定して常にスクロールバーを出させる。
いろいろあるもんだ。
- 『おかえりください』サウンドノベルWINDOWS版
- 『おかえりください』本編を加筆修正、６つのバッドエンド分岐シナリオを追加してサウンドノベル化！
音と映像が、血まみれのこっくりさんの惨劇を蘇らせる。 - 【無料体験版】はこちら
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
css web標準？
建国記念日だ。由来は知らないけど、祝日なのはめでたいのでツッコミはない。とはいえ、なんか風向きも悪く首筋が寒いので、今日はマジメにウチで調べもの…って、どうしょうもなければふたたびみたびの青空所属だけど。
仕事がらみのサイトのテコ入れ構想があって。前回はプログラマ氏の書いたHTMLとCSSに、わたしがひとりでプロパティを指定してた（？）ので、なしくずしというか、ひとり上手というか、手前勝手というか。
今回はcssのシェイプアップとそれによる表示速度UPを目指せ、という話。HTMLの構造も変更したほうがいいし、デザインもすっきりさせる、んで、今回は関わる人間が複数になる。
なので、cssの書き方とか統一しようね、と。
調べてみるといろいろあって、今さらおのれの無知・不明を恥じてみる50目前の年男だ。
今のCSSは。
丁寧にパッケージするため、ブログのテンプレートでありがちな＜ｄiv＞要素の数段重ねが多数。そこにＪａｖａｓｃｒｉｐｔであれこれするにはＤＯＭを辿るのに、たぶんコストが高くてブラウザに負荷をかける、と思う。なので、ここをすっきりさせる。
ＩＥ６でのレイアウトの崩れを押さえ込むのに、いたるところでアンダースコアプロパティを使っている。たぶんこんな無駄なものを読むとブラウザは不機嫌になる、と思う。なのでこいつを追い出す。
そもそも、どちらも、cssとかHTMLの見通しを悪くしてメンテしずらくなってるし。
読書ＳＮＳのリニューアルでも、ＩＥ６は専用のスタイルシートを読ませるようにして、妙なプロパティがなくなって、すっきりくっきり。ＩＥ６のことを考えずにスタイルシートを書いていって、ＩＥ６でおかしなところは後で専用シートに書けばいいだけなので、らくちんだった。
（先月公開した読書SNSのリニューアルは、それでもかなりWEB標準というのを意識してCSSを書いたつもりだったけど、今日調べただけでも、みっともないスタイルシートになってんなあ）
こまかいところでは。cssのプロパティの記述順ぐらいは決めておこう。Mozilla.orgのスタイルシート順がいいかな。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
