ウェブフォントの使い方（２）：表示タイミングを制御する場合

ウェブフォントを利用すると個性的なテキスト表示ができますと前に書きました。ウエブフォントの使い方 - jnobuyukiのブログいろいろ実験してみたところ、表示に関して、ブラウザのレンダリングでうまくいかないところがあったので、シェアします。ウェブ…

2014-12-15

SVG上のテキストの反転表示

Chrome d3.js HTML5 JavaScript svg

今回はSVGオブジェクトの上に設定したテキストをいろいろな向きに反転する方法をまとめます。ポイントは次の2点です。 text要素ではなくその上位のg要素で反転させる反転に伴ってテキストが移動するので補正する反転はテキスト要素ではなくg要素 SVGオブ…

2014-12-05

ブラウザのHigh DPI対応

Chrome HTML5 JavaScript

最近のラップトップPCは、非常に高い解像度のスクリーンのこともあります。今回は、高解像度のために多少手こずった話をまとめておきます。指定したサイズにウインドウが生成されない問題の発端はこれでした。Chrome拡張を利用したアプリを作成する際、man…

2014-11-15

レスポンシブに改行タグを無効化　2

Chrome CSS HTML5 JavaScript

前回に引き続き、レスポンシブな環境で、改行タグを効果的に無効化する方法を考えます。前回提案した方法は、大まかに表示幅を設定しました。今回は、表示されているテキストの幅と表示可能領域の幅を厳密に比べます。表示可能領域が、テキスト幅より狭くな…

2014-10-24

HTMLとCSSを利用した文中の文字の強調

HTML5 CSS Chrome

今回は、文中の特定の単語を強調する方法をまとめておきます。文中の文字の強調英語の文であれば引用符””で囲んだり、下線を引いたり、文字をイタリック（斜体）やボールド（太字）にしたりします。日本語の文でも、これらの形式で単語が強調されることが…

2014-10-24

JavaScriptでクロスブラウザ対応（２）

Chrome HTML5 JavaScript

今回は、JavaScriptでテキストデータをファイルに書き出す方法とその際のクロスブラウザ対応*1を紹介します。テキストデータをファイルに書き出す JavaScriptではFileAPIを利用してローカルファイルへアクセスできます*2。今回は、File APIの中のBlobとい…

2014-10-15

JavaScriptでクロスブラウザ対応（１）

Chrome HTML5 JavaScript

今回は、クロスブラウザ対応が必要な項目としてオブジェクト内の文字列の取得と設定をとりあげます。極めて基本的なオブジェクトにも関わらずクロスブラウザ対応が必要です。 (追記2014/10/15: その後調べた結果、クロスブラウザ対応の状況が変わっているこ…

2014-10-14

Javascriptでブラウザの判別

Chrome HTML5 JavaScript

今回は、クロスブラウザ対応（異なるブラウザで動作や表示をそろえること）に向けて、JavaScriptで使用中のブラウザを調べる方法をまとめておきます。ブラウザごとにJavaScriptの動作や表示が違うのはなぜ？ブラウザはそれぞれ異なるJavaScriptエンジンが…

2014-09-18

ChromeでshowModalDialog()を使い続ける方法

Chrome HTML5 JavaScript

HTML5の標準で動くjavascript関数にshowModalDialog()というのがあります。この関数がChromeのバージョン37から使えなくなっているのですが、しばらくの間使い続ける方法を紹介します*1。 2014/09/19追記：showModalDialog()を有効にし続けることで、リスク…