Archive for the Category CSS

 
 

【safari】テキストを選択して翻訳する機能拡張を作りました。

勉強がてらsafari5用エクステンション「Honyac」を作りました。 以下からダウンロードする事が出来ます。 honyac説明_00 Honyacはテキストを選択すると、その場でテキストを翻訳することが可能です。 日⇔英に対応しています。 インストール後、ブラウザの再起動もしくは新しいウィンドウやタブを開くことで、そのウィンドウやタブから使えるようになります。(リロードでも可)


Den ganzen Beitrag lesen…

【javascript】googleFontAPIで日本語フォントを使う

Twitterのテキストを美咲フォントにするHatena::Letを作ってみました。

実験には8*8ドット日本語フォント「美咲フォント」を使わせていただきました。

いろいろ試した結果必要になったファイル a. ttfファイル b. @font-faceが書いてあるcss(これはcを読み込む) c. aからfontを直接読むと認識されなかったのでヘッダつけてaをreadfileするphp

bのソース

@font-face {
  font-family: 'Misaki';
  font-style: normal;
  font-weight: normal;
  src:local('Misaki'), url('フォントになりすますphp') format('truetype');
}
/*

http://www.geocities.jp/littlimi/misaki.htm

美咲フォント アウトライン試作版 ライセンス</p>

<p>These fonts are free softwares.
Unlimited permission is granted to use, copy, and distribute it, with or without modification, either commercially and noncommercially.
THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.</p>

<p>これらのフォントはフリー(自由な)ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。 
*/

cのソース

< ?
  header('Content-type: font/ttf');
  header('Content-Disposition: attachment; filename="font.ttf"');
  header('Access-Control-Allow-Origin: *');
  readfile("フォントファイル名");
?>

これらを用意してHatena::Letで以下のソースを書いた。

/*
 * @title Twitterのテキストを美咲フォントにする
 * @description TwitterのフォントをGoogle Font APIを使って変更します。
 * @include http://twitter.com/
 * @license MIT License
 * @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
 * @require http://www.google.com/jsapi
 * @require http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js
 <em>/
if(location.href.indexOf('http://twitter.com/') != -1){
WebFont.load({
  custom: {
    families: ['Misaki'],
    urls:['http://lab.slackl.info/font/MisakiGothic_Outline.css']
  },
  loading: function(){
    alert("読み込みます...");
  },
  active: function(){
    $("</em>").css({
      "font-family":"Misaki",
      "font-size":"12pt"
    });
  }
});
}

っていうか日本語は1メガとかあるから重いなぁ・・・ 転送量やばそう。 いつか消しちゃうかも。

【CSS】iPadだけにCSSを適用する方法

結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。

linkやcss内の@mediaでどうにかなるもんだと思ってましたが。

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。
var iPad = /iPad/.test(navigator.userAgent);
if(iPad){
//iPadだけに適用させたい記述
}

  長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。
 
Den ganzen Beitrag lesen…

iframeとDD_belatedPNG

iframeで読み込むhtml内でDD_belatedPNG.jsを使うと iframeの中身がどっかに宇宙にいってしまうバグがある。 報告数も少なくgoogle先生もあんまり知らなそうだった。(ツイートで愚痴があったくらい)

解決方法としては iframeをposition:relative;にする。

PNGをSVGにして再配置する際に、基準となる要素を明示してあげる必要がある。(らしい) IE6乙!

【CSS】ime-modeについて

ime-modeはIE5が独自で実装したIMEの挙動を変更するCSSプロパティ。

IE8から接頭に-ms-がつくようになったようで -ms-ime-mode

Firefox3がime-modeに対応しているようですが、opera、webkitはノータッチ!

そもそもIMEではないしなぁ。

kotoeri-modeとかあったらいいの。

CSSで入力部分に干渉するのは変な話ですが。