SELECT要素のテキストを中央揃えにする

Webkit で表示するウェブアプリ製作の過程で SELECT (正確には OPTION になるかな)の要素内に表示されるテキストを中央揃えにする必要があって調べてみたところ面白いやり方が Stack Overflow にあったので紹介します。

もちろん最初に思いつくのは、スタイルシートを使って text-align: -webkit-center; とすることなのだけど、iOS では使えないことがそもそも知られている上に、開発環境の検証に使っている OS X の Safari 8 でも廃止されているようで上手く表現できずに却下することにしました。

次に考えたのは OPTION 要素のテキスト幅に合わせて SELECT 要素の幅を JavaScript から CSS で制御するという方法で、これと同じ発想を持った人がいたということです。

具体的には、まず SELECT の CSS を display: block; としておきつつ、width: 0 auto; を使って、あらかじめ用意しておいた固定幅を持つ親要素内で中央に配置するようにします。

それから、適当な要素(SPAN が適任!)をどこにでもいいので用意(詳細は後述)し、SELECT の ONCHANGE イベントで、選択された OPTION の TEXT 値を取得し、その要素に一時的に入れます。

ここまでくると結果は容易に想像できると思うのですが、その幅を読み取り、SELECT に適応するという手筈になります。

参考にしたコメントでは jQuery を使っていたのですが、今回のプロジェクトでは利用していなかったため次のような関数を使って SELECT の ONCHANGE イベントで呼ばれる関数内で発動することにしました。

var setSelectWidth = function(elm) {
  if(elm.selectedIndex < 0) {
    return;
  }
  var elm_tmp = document.getElementById('width_tmp');
  elm_tmp.innerHTML = elm.options[elm.selectedIndex].text;
  elm.style.width = elm_tmp.offsetWidth + 'px';
};

先に「後述」と書いたのは、この一時的にテキストを入れて幅を読み取る SPAN 要素の扱いで、これまた参考したものでは display: none; としつつも、jQuery の width() で幅を取得できているのですが、offsetWidth を使った場合は上手くいかず、代わりに position: absolute; として画面領域外にぶっ飛ばしておくという alert のタイトルを省いた時のような小技を使いました。

更に参考文では、SELECT に適用する幅の値に余白を与えていますが、SELECT に PADDING: 0; の設定と、両方の要素のフォントを揃えておくことで不要になるかと思います。また、 -webkit-appearance の設定の仕方で結果が若干変わってくることも考えられるので、SELECT の CSS に BORDER を付けて逐一確認するのが良いかと思います。

最後に疑問点としては、offsetWidth ではなくて clientWidth を使うとどうなるのか、ということと、display: none; の指定がある要素の幅を jQuery の width() はどのように取得しているのか、ということで、毎度ながら時間が許せば調べてみたいところです。

P.S. 右揃えだけなら dir 属性を使うと簡単に解決します。

参考:

The bug of animation-play-state on Webkit for iOS

具体的には HTML に記述されるノードの並び順によって keyframe が影響を受け挙動が変ってしまうという問題を見つけました。こちらのデモを参考まで。
animation play state bug (同じボタンを押す度に上下の円が順に回ります)

現時点でMac OS と iOS 版の Safari (7.0.1 9537.73.11 && 7.0 Mobile/11D5134c Safari 9537.5)、iOS 版の Google Chrome (32.0.1700.20) で影響を確認しています。そこで同じような問題が WebKit Bugzilla に投稿されているにも関わらず、未確認のまま一年が過ぎようとしているのに若干不安を持ちつつも、Android 並びに PC 版の Chrome ブラウザは正しく実装されているため Apple のバグレポートを使って報告しました。

iOS4 の時には既に製品として公開している中、バグレポートで大変な目に遭ったのですが、Google のモノはトリッキーにこちら側で手直しや対応することができる問題が多いのに比べ、Apple のは向こうの対応を待つしかないという箱庭で遊ぶ危険さみたいなものを感じて止みません。

P.S. さっき新たなβ版が出ていたのだけど、次のiOS 7.1に間に合ってほしいなー(棒読み)。

参考:

CSS Spriteで読み込み中アニメ

OS X 以来近年の Apple のサービスによく登場している「読み込み中」の表現は、10年前ならアニメーションGIFで対応したと思うのですが最近では CSS Sprite の技術を利用することが可能になりました。

(function($) {
	var initData = (function() {
		const imgW = 35;
		const imgNum = 12;
		var intid_loader = 0;
		var intval_loader = 50;
		var posY = 0;
		var imgId = 0;
		intid_loader = setInterval(function(){
			imgId = imgId >= imgNum ? 0 : imgId;
			var pos = '0px ' + (-imgW * imgId) + 'px';
			$('#loading').css('background-position', pos);
			imgId++;
			//console.log(pos);
		}, intval_loader);
	}).call(this);
})(jQuery);

この例では、35ピクセルの正方形を12駒分、縦方向であるY座標を上方へ100ミリ秒ずつ動かしています。このブログの先頭ページに設置したのでご参考まで。

ところがこのタイマーによって繰り返す手法も代替の時期にきていて、実際に繰り返し関数をアニメーションのフレームに使うことに比べると正しい姿だと思うのですが、既に jQuery と requestAnimationFrame の採用問題などあり、更に向こう10年間のブラウザの対応など注意して追いかけていく必要があります。


今回のネタ元でした。

P.S. 画像処理でもいいよね… loading – Google 検索

参考:

SafariでCSSの表示確認

JavaScript で動的にノードを追加しても描画してくれるので、いちいちファイルを編集→ブラウザ切り替え→リロードという手間コンボが必要ありませんよー、という映像です。

最近メタディスクリプションの内容を書き換えるという難解!な要件があって活躍したとかしないとか。

参考:HTML and CSS Debugging Tools | Design Shack

P.S. 連投で恐縮ですが iPad で何か書かせてください。;-)

WordPressのビジュアルエディタのフォントを変更する

使い始めた WordPress のビジュアルエディタは先にも述べたようにRTFを扱うように便利なのだが、丸ゴファンとしては Safari RSS の時と同様に変更したいところだ。

wp-includes/js/tinymce/themes/advanced/skins/wp_theme/の中にあるcontent.cssを見ているようなので、このファイルを開き、74行目のbody.mceContentBodyのフォントサイズの指定数値を14pxに変更してみました。

引用元: WordPressのビジュアルエディタのフォントを変更する

具体的には次のように変更した。バージョン2.8ではどうやらこのファイルだけ編集すれば良いらしい。

font: 14px/19px 'HiraMaruPro-W4', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif;
line-height: 1.5;

実際に Safari 4 と IE7 ではこう見える。

safari

ie7

Disabling the “action” pop-up on iPhone

iPhone で表示される JavaScript イベントの背景について処理する方法を以前紹介したが、具体的に CSS ファイルに直接書く方法と、JavaScript から操作する方法がある。

7 tips for using UIWebView « Coding Ventures
document.documentElement.style.webkitTapHighlightColor = “rgba(0,0,0,0)”;

次のアップデートでは、このようなコードを差し込む予定。

window.addEventListener("load", function() {
 initScore();
 document.addEventListener("touchmove", function(){ event.preventDefault(); }, false);
 document.documentElement.style.webkitTapHighlightColor = "rgba(0,0,0,0)";
});

また、アクションポップアップを消す方法として次のような処理が紹介されていたが、イベントハンドラに onclick を使わずに onTouchStart を使うと(反応が速いという利点もあって)良いと思う。(と、彼の投稿にコメントを書こうと思ったのだが面倒に…)

7 tips for using UIWebView « Coding Ventures
document.documentElement.style.webkitTouchCallout = “none”;

一方この資料で面白かったのは、 DeliciousSafari も使っているプロトコルの作成方法だ。
sqlite から保存データを別の UIVew へ表示する場合や、同じソフトを持つ友人とメールで共有する場合に使おうと計画している。

Control colors of background to be highlighted by taps on mobile Safari of iPhone

iPhone に搭載されている mobile Safari では、JavaScript を使ってタップイベントを作ると背景に影が付き、参照タグのタイトル属性を「アクション」という見出しで吹き出し風に表示する。

インタラクションをユーザーに通知する方法として2通り存在するのは冗長だと感じたので、背景処理をなんとかしようと決めた。

iphone onclick shading – iPhoneWebDev | Google グループ
To disable tap highlight for an element add to its style
the following CSS tag: -webkit-tap-highlight-color:rgba(0,0,0,0);

“-webkit-tap-highlight-color” という属性を知らなかったことはさておき、”rgba” を使いアルファ値を “0” にしている点に注目だ。しかしこのアルファ値は面白いことに、0 かそれ以外の値しか取らないようだ。これはもしかして Safari 4 で有効になるかもしれないので今後のアップデート(今週火曜の3.0で?)に期待する。

Safari RSSのスタイルを編集

Safari ブラウザを 3.1.1 にアップデートしたところ RSS Feeds に読み込みに失敗するという問題が生じたが、こちらのディスカッションを参考に無事回復することができた。具体的には次の2つの、sqlite3 データベース用のファイルとキャッシュファイル格納用のディレクトリを一時的にデスクトップなどの適当な場所に移動した後、Safari を再起動するだけで良いが、RSS Feed の登録数によっては虹カーソルが回り続け、ドックの Safari アイコンを右クリックするとあたかもフリーズしたかのように “アプリケーションが応答しません” と言われるが、再構築まで少しの時間辛抱して待つ必要がある。

~/Library/PubSub/Database/Database.sqlite3
~/Library/PubSub/Feeds

RSS の購読に Safari を使っているのだけど、初期状態の見出しフォントが小さく、毎回フォントサイズを大きくする手間がストレスとなっていたため次の場所に置いてある CSS ファイルを編集した。

/System/Library/Frameworks/PubSub.framework/Versions/A/Resources/PubSubAgent.app/Contents/Resources/Main.css

余談まで、Finder で “コンピュータ” や “ホーム” といったショートカットを持たないディレクトリ移動は、以下のようにパスまでをクリップボードに入れた状態でコマンド+シフト+G を押すと良い。

font-family と font-size プロパティの値を変更しただけだが、以下のような画面表示となる編集済みのCSS ファイルを公開サーバー上に置いたので自力作業が面倒な方はバックアップを保存した上でお使い頂きたい。(このファイルの置換や編集には管理者権限が必要で作業には認証を求められる。)

Fw: CSS+αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ

Ajax を活用した構築方法ですと、DOM スクリプトを使って backgroundImage に放り投げるため “no-repeat center center” とすれば微力ながらも画像ダウンロード禁止処理が加わり良いと思うのですが、ホットペッパーWebサービスの設計はどうなのか気になります。

さらにこの Blogger 上で試してみると、空白ピクセルを使わずに縦方向の位置が変化しています。(デフォルトの CSS 記述を読むか important で避ける必要アリ。)

IMG_3385

CSS+αで縦横混在の長方形画像を、正方形枠でセンタリングさせる方法 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ
<div style="width:100px;height:100px;text-align:center;border:1px solid #ccc;padding:0;">
<img src="http://mtl.recruit.co.jp/blog/IMG_3385.jpg" width="100" height="75" alt="IMG_3385" />
</div>

少し話は逸れますが、もし初回の読み込み時(ページ表示の初期化)に PHP でタグを出力したとしても、ページャーを使う以降の同じページ設計の遷移では Ajax を利用することでサーバーサイドから徐々にクライアントサイドの技術を利用するソフトウェアやサービスに移行することができます。

最近 PHP で MVC 設計のソフトウェアを見せて頂いたのですが、ファイルやディレクトリ名とその位置関係が分かりにくい反面、関数の連携や処理を確認するのに適していると思いました。

話を戻すと、使う html のバージョンについても意識しておくと(・∀・)イイ!ですね。

今回は仕事メールの文調で。

Thought on CSS for the Submit Object


I agree with most of what Particletree » Rediscovering the Button Element has said, but I think many programmers who create administration tools would like to use the input with the type=”submit”.

As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari).

So, here’s the CSS code I have thought on the Submit object to claim cross-browser compatibility in a more easily readable and understandable format.


input[type=submit] {
border: 2px outset #CCC;
cursor: pointer;
padding: 3px;
font-weight: bold;
width: 100px;
height: 30px;
background-color: #F0F0F0;
}

input[type=submit]:active {
border: 2px inset #CCC;
}

Of course, the submit button markup is a standard one.

<input type="submit" value="送信" />

And it looks like this… is what I would like to say, but I stop uploading the image since it looks much the same. (with reference to the above 🙂