フォントサイズの最小値と最大値を決めてその間は横幅に応じて拡縮するSCSSのmixinを作ってみました。

SPとPCのデザインカンプがあるが、その間(タブレット)のフォントの指定がない場合に悩まないように作成しました。
こちらのページを参考にしました。
Fluid-responsive font calculator

See the Pen vw base text by copain (@copain) on CodePen.

Adobe Animate CC 2015.2からパブリッシュしたcanvasコンテンツがIE10とIE9で表示ができない件を修正する

2016.8のリリースではwindow.devicePixelRatio || 1として修正されています。

原因はwindow.devicePixelRatioの値が取れないためのようです。
出力したHTMLファイル内に以下のような箇所があります。


var pRatio = window.devicePixelRatio,

これを以下のように書き換えます。


var pRatio = window.devicePixelRatio || Math.round(window.screen.deviceXDPI / window.screen.logicalXDPI),

以上になります。

参考:javascript – window.devicePixelRatio does not work in IE 10 Mobile? – Stack Overflow

CSS:今日から始める縦書き表現4

前回に引き続き具体的なレイアウトに縦書きを使ってみた例です。

DEMO:縦書きレイアウト1
レスポンシブ、Webフォント(typekit)で実装しています。
IE10+、ほかはブラウザの最新版で検証しました。

  • 句読点の禁則処理はword-wrap: break-word; overflow-wrap: break-word;としました。
  • 要素の高さなどが不安定でいまいち読めないところがありました。
  • SP時は縦書きをすべてクリアしました。
  • SP時の3列の画像に object-fit: cover;を指定してみました。

一方でブラウザごとの差異もまだまだ有りますね。

  • 縦書き部分のボックスの高さを決めないとブラウザ間で違った段数になる。
  • 高さを決めてoverflow:scrollにした場合Chrome以外はスクロールバーが左に出る。
  • Androidブラウザー(4.1.3で検証)はtypekitでのWebフォントは反映されませんでした。

とは言え、表現重視で行きたい場合は現状でも結構手応えを感じました。

CSS:今日から始める縦書き表現3

前回に引き続き具体的な例を2つほど作成しました。
差し込み的に使えるかと思います。

■ドロップキャップ
2段目の頭の1文字だけを大きくする、よく見かける表現(宮沢賢治の「宮」)ですが
Firefoxではfloatさせると妙な感じになってしまいました。

DEMO:縦書き(差し込み例)