スキップしてメイン コンテンツに移動

些細な日常

ラベル(属性)が付いた投稿を表示しています

すべて表示

dir属性で文書方向を入れ替えたSVGのtext要素を適切に表示する方法|HTML

イメージ

僕が提供する Blogger用テンプレートのImaginary の特徴の一つに文書方向の左右対応がある。日本語や英語などの右から左へ書いて行く言語がある一方で、アラビア語やヘブライ語などの右から左へ書いて行く言語もある。Imginaryはどちらでもブログが適切に表示されるように設計されているんだ。 サイトの文書の方向はHTMLのdir属性のltrかrtで決められてアイコンなどの向きを左右に反転させたいものがあればCSSのtransform要素のscaleX(-1)を使うとデザインを合わせられる。 この二つで全て上手く行くと思ったら大間違いともいうべき苦しみを味わわされることになったので、なぜかの原因と修正できた対処法を載せておきたい。 SVGのtext要素は反対方向の文書で適切に表示されない テンプレートに新しく翻訳ウィジェットを搭載してボタンで起動するために翻訳アイコンを追加したら元から入れ替えた…

HTML要素の全ての属性の有無と名前と値を調べる|JavaScript

イメージ

Bloggerの投稿画像の WebP と 遅延読み込み のJavaScriptプログラムにscriptタグを新しく作って入れ直すという部分があって元の属性としてsrcとasyncという良くあるものを付けてやっていたけれどもどんな属性でも対応できるように変えた。 そのとき、元のscriptタグに属性があるかないか、又、あるならばどんな名前で、何の値が付いているかを全ての属性について調べる方法が必要になった。 hasAttribute()メソッドはHTML要素の属性の有無を調べられるけれども特定のものだけで、その名前も分からない。属性の値はgetAttribute()メソッドで取得できるけれども予め名前が分かった属性にしか使えないんだ。 どうしようもないので、正規表現でソースコードを分解してパターンマッチングで取り出すべきかとやってみたけれども、中々、上手く行かなくて大変なので、もう一度、メソッドか何かで…

Search Consoleのモバイルユーザビリティのエラーを引き起こす画像について

イメージ

Googleが モバイルファーストインデックス を導入してスマホでのサイト評価を最優先するようになって久しい。サイトがモバイルに対応しているかどうかはGoogleが提供している モバイルフレンドリーテスト で分かるけれどもSearch Consoleではサイト解析からエラーのページがあれば自動的に表示される。 現在の SEO対策(検索エンジン最適化) で、下地となるのがモバイルユーザビリティだから是非とも注意しておきたいにも拘わらず、ブログでエラーが出てしまって改善しなくてはならなくなった。 画像がモバイルユーザビリティのエラーを引き起こす原因 モバイルユーザビリティ|Search Console| Google 僕はSearch Consoleでモバイルユーザビリティの二つの項目を指摘された。 テキストが小さすぎて読めません クリック可能な要素同士が近すぎます ブログのスマホでの表示は大丈夫で、何の支障もないから…

画像のdecoding-async:非同期処理による高速化について

イメージ

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する decodingは画像のimg要素に使える属性で、画像のデコード(ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程)の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる(初期値) sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどのような順番で表示するかに影響を与える。 画像のデコードの同期処理とは何か 文書などの画像以外のコンテンツの間に画像があ…

画像のloading-lazy:遅延読み込みによる高速化について

イメージ

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む(初期値)。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従来と変わらない。ただし不要というわけではなく、loading属性がないとブラウザが勝手にlazyの動作をする場合があるのを確実に止めたりするのに使…

異なった属性を有する二つの実体は相互に共通点を有しない|スピノザのエチカの第一部定理二

イメージ

スピノザ の エチカ の第一部:神についての定理二を心からの敬愛を込めて理解する。 定理二 異なった属性を有する二つの実体は相互に共通点を有しない。 証明 これもまた定義三から明白である。なぜなら、おのおのの実体はそれ自身のうちに存しなければならずかつそれ自身によって考えられなければならぬから、すなわち、一の実体の概念は他の実体の概念を含まないから、である。 バルーフ・スピノザの エチカ (畠中尚志訳) 実体の定義からするとそれ自身で存在し、認識される対象だからかりに複数の実体の属性が同じ場合でも「相互に共通点を有しない」という第一部定理二の内容は明白だろう。 しかしスピノザは「異なった属性」という状況に敢えて固執している。なぜか。複数の実体の属性が同じだとそのこと自体が実体同士の共通点として捉えられる可能性があるためだと推察される。認識を裏返すと属性の同一性は複数の実体の共通点を保証する概念として受け取…