投稿

css overflow hidden を使用すると前後の要素の位置がおかしくなる

イメージ
表示領域を固定して「overflow:hidden + text-overflow:ellipsis;」を使用して、領域以上の文字は 「…」で表示するというのは、よく使うトリックである。 しかし、chrome以外では、inline-boxの要素にoverflow:hiddenを指定すると表示位置が微妙にずれる。 「Stack Overflow」にも同じような内容の投稿がある。 http://stackoverflow.com/questions/4310047/css-why-is-vertical-align-baseline-stop-working-on-firefox-when-using-overflow [overflow]未指定 firefox15(ずれない) chrome21(ずれない) [overflow:hidden]指定 firefox15(ずれる) chrome21(ずれない) firefoxだけがおかしいのではなく、IEでも同じように表示される。 ちなみに、inline-block要素にvertical-align:middleを指定すると、それなりに中央位置へ要素が配置されるが、前後の要素とは、ずれる。 位置のずれが少しであるため、よけいみっともない。 [overflow:hidden vertical-align:middle]指定 firefox15(ずれる) chrome21(ずれる) 本題 overflow:hiddenを使用する箇所が少ないのであれば、marginや、paddingの値を中央に配置するよう微調整すればよいが、大量にある場合はそれぞれを調整するのは困難である。 なので、overflow:hiddenを指定しないで、同じように表示する仕組みを考えてみた。 まずHTMLの定義。 <div class="inline-block test4" data-dummy="test test ..."> test test test
コメントを投稿
続きを読む

itext 5.3.0 で UniJIS-UCS2-HW-H を指定した場合、欧文文字の幅がおかしい

イメージ
itext 5.3.0がリリースされていたので試してみたところ、UniJIS-UCS2-HW-Hを指定した場合、欧文文字の幅が広がっていた。 5.1.3で出力した場合 5.3.0で出力した場合 PDF出力に使用したサンプル Document document = new Document(); PdfWriter.getInstance(document, new FileOutputStream(filename)); document.open(); BaseFont bfH = BaseFont.createFont("KozMinPro-Regular", "UniJIS-UCS2-H", BaseFont.NOT_EMBEDDED); Font fontH = new Font(bfH, 20); document.add(new Paragraph(bfH.getPostscriptFontName(), fontH)); document.add(new Paragraph("ABCDEあいうえお", fontH)); document.add(Chunk.NEWLINE); CJKFont bfHW = new CJKFont("KozMinPro-Regular", "UniJIS-UCS2-HW-H", BaseFont.NOT_EMBEDDED); System.out.println("AのCID CODE:" + bfHW.getCidCode('A')); Font fontHW = new Font(bfHW, 20); document.add(new Paragraph(bfHW.getPostscriptFontName(), fontHW)); Paragraph p = new Paragraph("ABCDEあいうえお", fontHW); document.add(p); document.close(); System.out.println("don
コメントを投稿
続きを読む

IEで画面遷移時にgif画像でローディンングのアニメーションを表示

「送信」ボタンをクリックし、次の画面に移る際に、処理中を示すためアニメーションでくるくる回る画像を表示しようとした。 画像はdivタグで囲いHTML内に配置し、javascriptでdivタグの表示、非表示を切り替える実装をおこなったのだが、chromeでは問題なく回るが、ieでは回らなかった。 デバッグツールを使用し、非表示状態のdivを表示したところ、 画像自体のアニメーションは動作していたので、タイミングの問題かと思い何度か試していたが回らない。 Stack Overflow にjavascriptでinnerHTMLにimgタグを挿入すればできるというようなことが書いてあったので、半信半疑で試してみたらくるくる回るようになった。
コメントを投稿
続きを読む