Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【つまづき】丸で囲む文字、を作ろうとしたらiPhoneでズレまくった話^^;

 どうも!LSSです!!

 

ちょっと思いついた事があって、CSSネタで記事を書いていたのですが…iPhoneで見ると見事にズレまくりw

解決方法はありそうな気がするのですが…。という「つまづきの記録」記事です。

 

 

丸で囲む文字

こんな風に、丸に光を入れてもオシャレ?かもですね。

 

コード

こんな風に、<span style="letter-spacing: 0.2em; background: radial-gradient(closest-side circle at 65% 35%,#ffffff 30%,#ffffff00 95%) -0.1em -0.1em/1.2em 1.2em repeat-x,radial-gradient(closest-side circle,#ffcc44 94%,transparent 95%) -0.1em -0.1em/1.2em 1.2em repeat-x;">丸に光を入れてもオシャレ?</span>かもですね。

 

↑書きかけの下書きより抜粋

 

 

PC+Chromeではそこそこ正常

ビミョーに丸が欠けていたり、ビミョーに末尾に次の丸の端っこが見えたりはありながらも、そこそこ見えてるので複数パターンとそのコードを用意していました。

で、ほぼ書けたところで、iPhone(の、はてなアプリ)で下書きをプレビューしてみたところ…まったく話にならないレベルで横位置がズレまくってショックwwww

 

 

解決策はありそうな気がするのですが…

というのが…不思議なもので、iPhoneはてなアプリでの表示、プレビューだと大いにズレているものの、編集状態の時にはちゃんと収まってるんですね。

letter-spacing か、フォントサイズ、それのテーマorデザインCSSの内容が干渉しているのか…うーん。

 

 

 

という、つまづきの記録でした。

次回もまた、よろしくお願いします^^