タグ「縦書き」が付けられているもの
バージョン 1.3.0 を公開しました。 → h2v.js - Webページを縦書きレイアウトに変換するJavaScript予告していたように、 iPhoneなどのモバイル版Safari（およびMo…
さてさて、横書きhtmlを縦書きレイアウトに変換するJavaScript「h2v.js」ですが、次回の更新には以下の内容が含まれる予定です。 iOS版Safari、およびiOS上でWebkitエンジン…
ええと、 divやらspanやらに表示フォントサイズを指定してやるでしょ。 iPhoneのSafari（以下MobileSafari）から、そのページにアクセスするでしょ。 JavaScriptで、フ…
作ってみた。ここから下の本文が縦書きで表示されている筈。IE 7以前のバージョンや、携帯・スマートフォンブラウザで閲覧している人、その他レイアウトがズレているときは、↓この辺に表示されている「縦→横切…
縦書き用スタイルシート、久しぶりに弄っていたら不具合発見。 Operaの一部のバージョンで、transform が効かない。このスタイルシートでは、括弧や長音記号などを 横書き → 縦書き に変換する…
縦書きCSSに関して、質問をいただきました。 自動改行はできないのでしょうか？ 1センテンスが長いと、もの凄く縦長になってしまうのです。 結論から書きますと、うちの縦書きスタイルシートを使う場合、残念…
波線「〜」には、別々のキャラクターコードに割り当てられた、似たような字形の文字があるので注意。 …という話。結論から書くと、Macで「から」を変換して出てくる「〜」や、JISキーボードで「へ」のキーに…
やっぱりねぇ、シェアがNo.1だろうが扱いづらい物は扱いづらい。先月のブラウザ別アクセス統計を見てみましょう。 2010年11月のブラウザ統計 @ freefielder.jp 1MSIE 8.033…
なんだかよく判らないタイトルですが。要は、縦書きスタイルで日本語を縦書き表示するときに、半角英数字の表示方法をどうしようか、という話です。3つの表示方法を比較 / 検討してみましょう。 span.te…
ウェブブラウザ上で動作する、JavaScriptベースのWYSIWYGテキストエディタ。日本語を縦書きで入力できるエディタを作ってみた。 → 縦書きWYSIWYGエディタ tateEdit｜free…
ということで、前の記事の続きです。なんだかステキなCSSを使ったならば、要素を綺麗にセンタリングできることが判ったので、縦書きレイアウト用スタイルシートにスタイルを追加してみました。縦書きスタイルシー…
スタイルシートを使って、うまく中央配置をする方法は無いかと探してみたら、こんなサンプルを見つけた。 #div_container{ position: absolute; left: 50%; hei…
[ 2010年12月6日：追記 ] この記事で書いているような方法より断然ステキな方法を発見したので、そちらを参照してみてください。 → [スタイルシート] センタリング。｜2010年11月29…
ということで、「CSS3のtransformを使った縦書きレイアウト用スタイルシート」を紹介しているのです。 → 縦書きWebページプロジェクト (http://freefielder.jp/tat…
ちょっと前のブログ記事で試してみた「CSS3のtransformプロパティを使ってWebで縦書き表示」、なんとなく上手くいきそうなので、今まで紹介してきた縦書き用CSSを全面刷新してみました。 → …
まだまだブラウザごとに実装にばらつきのあるCSS3です。今、とりあえずワタクシが使いたいCSS3のプロパティはtransform。理由はいっこ前のブログ記事を参照してみてください。で、思い切ってInt…
さてさて、長らく放置していたhtmlでの縦書きレイアウト方法です。概要についてはコチラのページを見ていただくとして、縦書きレイアウトを実現する上で、いちばん気になっていたのが長音記号。「ー」ですね。W…
さてさて、Webページに表示させたいフォントをスタイルシート(CSS)で指定することができるのですが、これまでは、そのフォントがユーザのPCにインストールされていなければ表示されませんでした。でも、次…
さてさて、ウェブブラウザ上で「青空文庫」に収録されている作品を縦書き表示で読めるというスクリプト『青空文庫を縦書き表示』です。ご愛用していただいている人もいらっしゃるようで嬉しい限りなのですが、長い作…
さてさて、せっかく「縦書きWebページ作成スクリプト」というものを作ってみたので、有効活用してみましょう。本文が縦書き表示のブログを立ち上げてみた。まずは見ておくんなさい。 → 階段 百物語...ま…