◆WEB画面文章中にアイコンを文字の様に入れる: 万象酔歩

◆WEB画面文章中にアイコンを文字の様に入れる

あれやこれやいろいろなアイコンを文章中に置く
複数のアイコンを隙間なく文章中に並べる。
文章中に特殊なアスペクト比のアイコンを置く。

HTMLで文章中、文字の代わりに画像（アイコン）を入れる

HTMLで文章中に画像(アイコン）を文字の代わりに入れるには、次のようにします。

<style>
.inline-img {
   width         : 1em;
   height        : 1em;
   vertical-align: -0.12em; // middleも可
   }
</style>
<body>
<p>
文章中に<img src="./icon_gear.png" class="inline-img">アイコンを挿入。
</p>
</body>

表示は次のようなイメージになります。

文章中にアイコンを挿入。

参考までに、アイコンのセットを用意しました。gearもこの中に入っています。

ダウンロード - hi_icons.zip

記述を簡便化する

アイコンをフォルダに予め用意したフォルダに纏め、そのフォルダをデフォルトとして指定出来ることと、サイズの指定が出来るようにするための定義も用意しました。
ファイル名が"icon_"で始まり".png"で終わる場合"key="でキー部だけ指定できるようにしました。

ファイル名指定(src=ファイルパス)
キー名指定(key=キー名)
src,keyで複数の画像を指定
サイズ指定(em値)
半角サイズ指定(em値h)
サイズ、アスペクト比(em値,比))
両脇の隙間指定(gap=em値;EX. gap=0.3)
指定長の空白(src,keyを指定しない)
組み込みの空白(key='#')


<script>
var icon_img_dir="./"
const transparentGif="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=";// 1×1透明gif
class setIconInText extends HTMLElement {
   connectedCallback() {
      const src       = this.getAttribute('src');
      const key       = this.getAttribute('key'); // key属性を取得
      const size      = this.getAttribute('size') || '1'; // sizeがなければ '1' をデフォルトに
      const gap       = this.getAttribute('gap'); // gap属性を取得
      let   pos       = this.getAttribute('pos')||'-0.12';//'-0.074';

      let height, width;
      // size をカンマで分割して配列にする
      let sizeArray = size.replace(/h/g, ',0.5').split(',');
      // 配列の要素数に応じて height と width を設定
      if (sizeArray.length === 1) {
         // 数値が1つの場合、両方にその値を設定
         height = parseFloat(sizeArray[0]);
         width = height;
         }
      else if (sizeArray.length === 2) {
         // 数値が2つの場合、先の値を height に、後の値を width に設定
         height = parseFloat(sizeArray[0]);
         width = height*parseFloat(sizeArray[1]);
         }
      let ypos;
      if(pos=='c'){
         ypos=((height-1)*(-0.5)-0.12)+'em';
         }
      else if(pos=='t'){
         ypos=((height-1)*(-0.9)-0.12)+'em';
         }
      else{
         ypos=(height*parseFloat(pos))+'em';
         }       
      // sizeに応じたcss要素
      const style=`width:${width}em;height:${height}em;vertical-align:${ypos};` 
      // 複数ソース対応
      let imagePaths = [];
      if (src) {
         // src がカンマで区切られている場合、複数のパスを処理
         imagePaths = src.split(',').map(item => 
            item.includes('/') ? item.trim() : `${icon_img_dir}/${item.trim()}`
            );
         }
      else if (key) {
         // key がカンマで区切られている場合、複数のパスを処理,#は透明gif
         imagePaths = key.split(',').map(item => 
             item.trim() === "#" 
                ? transparentGif 
                : `${icon_img_dir}/icon_${item.trim()}.png`
         );
         }
      else {
         // src も key もない場合、デフォルトの透明GIF画像を返す
         imagePaths = [transparentGif];
         }
      let imgWithGap = '';
      for (let imagePath of imagePaths) {
         // imgタグの前後に隙間を追加するための変数
         if (gap) {
            const gapValue = gap + 'em';
            imgWithGap += 
                 `<img src="${imagePath}" alt="アイコン"`
                +` style="${style} display:inline-block;margin-left:${gapValue};margin-right:${gapValue};"`
                +`>`;
            }
         else {
            imgWithGap += `<img src="${imagePath}" style="${style}" " alt="アイコン">`;
            }
         }
      this.innerHTML = imgWithGap;
      }
   }
customElements.define('icon-img', setIconInText);
</script>

ファイル名指定(src=ファイルパス)

<p>
文章中に<icon-img src="./icon_gear.png" />アイコンを挿入。
</p>

表示は次のようなイメージになります。

文章中にアイコンを挿入。

src記述が"/"を含む場合は直接そのファイルが参照されます。"/"を含まない場合、デフォルトのフォルダが参照されます。

キー名指定(key=キー名)

ファイルがデフォルトのフォルダ上にあり、かつicon_で始まり.pngで終わる場合、key=でキー部だけ指定することができます。
srcが指定されている場合がsrcが優先します。

<p>
文章中に<icon-img key="gear" />アイコンを挿入。
</p>

表示は次のようなイメージになります。

文章中にアイコンを挿入。

src,keyで複数の画像を指定

src,keyでは複数の画像をカンマで繋いで指定することができます。

<p>
文章中に<icon-img key="left,right,up,down" />アイコンを挿入。
</p>

表示は次のようなイメージになります。

文章中にアイコンを挿入。

サイズ指定(em値)

size=em値（全角幅との比）でサイズを指定できます。

<p>
文章中に<icon-img key="gear" />アイコンを挿入。<br>
文章中に<icon-img key="gear" size=2 />アイコン(size=2)を挿入。
</p>

表示は次のようなイメージになります。

文章中にアイコンを挿入。
文章中にアイコン(size=2)を挿入。

半角サイズ指定(em値h)

サイズ値にhを付加すると半角となります。半角（幅が高さの半分）のアイコンが用意されていれば歪なく表示できます。

<p>
ABC<icon-img src="icon_h_dot.png" size="1h"/>DEF<br>
四分音符<icon-img src="./icon_h_note8.png" size="1h"/>を表示<bt>
abc<icon-img src="./icon_h_rest4.png" size="1h"/>def<bt>
A:<icon-img key="h_note8,h_note4,h_rest8" size=1h />
B:<icon-img key="h_note4,h_note8_r,h_note8_lr,h_note8_l,h_rest8" size=1h />
C:<icon-img key="h_note4,h_note8,h_note4,h_note8,h_rest8" size=1h />
</p>

表示は次のようなイメージになります。は３つのアイコンを隙間なく並べたものです。非等角フォントの場合A,B,Cが異常に大きく、:が異常に小さく見えるかも知れません。アイコンは正確に半角サイズです。

ABCDEF
四分音符を表示
abcdef
A: B: C:

等角フォントでは次の様になります。

四分音符を表示
abcdef
A: B: C:

サイズ、アスペクト比(em値,比)

sizeで"高さ、幅の比"が設定できます。半角(1h)はsize="1,0.5"と同等です。
主に1:1や1:0.5以外の画像を歪みなく表示する場合指定します。

<p>
文章中に<icon-img key="4_bansho" size=2,4 />アイコン(size=2,4)を挿入
</p>

表示は次のようなイメージになります。

文章中にアイコン(size=2,4)を挿入。

垂直位置(pos='c',pos='m',pos=em値)

pos=指定で垂直位置を設定できます。pos='c'でほぼ文字フォントに合わせた中央配置となります。't'でtop位置配置となります。数値で細かく指定することもできます。pos指定無しはpos='-0.12'と同じです。

pos無し size=1:,size=1.5:,size=2:,size=3:

pos='c' size=1:,size=1.5:,size=2:,size=3:

pos='t' size=1:,size=1.5:,size=2:,size=3:

pos='0.1' size=1:,size=1.5:,size=2:,size=3:

pos='-0.8' size=1:,size=1.5:,size=2:,size=3:

両脇の隙間指定(gap=em値;EX. gap=0.3)

gap=1～9で0.1em～0.9emの間隙をアイコン前後に置くことが出来ます。数値と/の間に空白が必要です

   <p>
   文章中に<icon-img key="gear" gap=0.3 />アイコン(gap=0.3)を挿入。
   </p>

表示は次のようなイメージになります。

文章中にアイコンを挿入。
文章中にアイコン(gap=0.3)を挿入。

指定長の空白(src,keyを指定しない)

src,keyを省略すると空白域が作られます。size指定が出来ます。 1em以上にする場合は"size=1,値"の形で高さを１として幅を指定します。

<p>
文章中に空白<icon-img size="0.3" />を挿入。さらに<icon-img size="1,2.5" />挿入。
</p>

表示は次のようなイメージになります。

文章中に空白を挿入。さらに挿入。

組み込みの空白(key='#')

key='#'とすると組み込みの空白が採用されます。

<p>
<icon-img key=
   "h_note8,h_note4,h_rest8,h_note4,h_note4,h_note8,h_rest8,h_note4,h_note8,h_rest8,h_rest4"
   size="1.5h" /><br>
<icon-img key=
   "h_note8,h_note4,#,h_rest8,h_note4,#,h_note4,#,h_note8,h_rest8,h_note4,#,h_note8,h_rest8,h_rest4"
   size="1.5h" />
</p>

次のようなイメージになります。

万象酔歩で用意されているアイコンの利用

▽は文字として有るけどは無い、 ▷は環境依存で▽とのバランスがとれていないことが多い、メニューを表すを表現するのが難しい、など表記上の不足を解消するため、文字列中に置くための単純な画像（アイコン）を用意しました。

次の記述をHTMLに置くと、<hi-con>タグでアイコンを文中に置くことができます。

<script type="text/javascript" 
        src="http://k-hiura.cocolog-nifty.com/blog/files/hienv.js"
        charset="UTF-8"></script>

src=,key=が使えます。src=に/の入ったファイル名を書けば用意されているアイコン以外も表示できます。

用意されているアイコンは次のものです。標準の埋め込み(全角サイズ）とアイコンを少し目立たせるためのsize指定gap指定の例を載せました。

キー名	埋め込み例	埋め込みコード
h3dot	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="h3dot"/>
v3dot	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="v3dot"/>
v3bar	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="v3bar"/>
enter	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="enter"/>
arrow_left	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="arrow_left"/>
arrow_right	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="arrow_right"/>
arrow_up	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="arrow_up"/>
arrow_down	文章へ埋込文章へ埋込(size=1.4)	<icon-img key="arrow_down"/>
left	文章へ埋込文章へ埋込(gap=0.2)	<icon-img key="left"/>
right	文章へ埋込文章へ埋込(gap=0.2)	<icon-img key="right"/>
up	文章へ埋込文章へ埋込(gap=0.2)	<icon-img key="up"/>
down	文章へ埋込文章へ埋込(gap=0.2)	<icon-img key="down"/>
gear	文章へ埋込	<icon-img key="gear"/>
folder	文章へ埋込	<icon-img key="folder"/>
home	文章へ埋込	<icon-img key="home"/>
repeat	文章へ埋込	<icon-img key="repeat"/>
replace	文章へ埋込	<icon-img key="replace"/>
qr	文章へ埋込	<icon-img key="qr"/>
pointer	文章へ埋込	<icon-img key="pointer"/>
cursor	文章へ埋込	<icon-img key="cursor"/>
target	文章へ埋込	<icon-img key="target"/>
mouse	文章へ埋込	<icon-img key="mouse"/>
mouse_l	文章へ埋込	<icon-img key="mouse_l"/>
mouse_r	文章へ埋込	<icon-img key="mouse_r"/>
mouse_c	文章へ埋込	<icon-img key="mouse_c"/>
mouse_cr	文章へ埋込	<icon-img key="mouse_cr"/>
mouse_w	文章へ埋込	<icon-img key="mouse_w"/>
outerbox	文章へ埋込	<icon-img key="outerbox"/>

size指定

サイズをem値（全角サイズとの比）で指定できます。無指定は1指定と同じです。

<hi-icon key="outerbox" size=1～ />
1 1.2 1.3 2 3 4 5

<hi-icon key="gear" size=1～ />
1 1.2 1.3 2 3 4 5

中央配置(pos='c')

pos='c'を付けると中央配置となります。

<hi-icon key="outerbox" size=1～ pos='c' />
1 1.2 1.3 2 3 4 5

<hi-icon key="gear" size=1～ pos='c' />
1 1.2 1.3 2 3 4 5

size指定(半角)

音符アイコンが半角で用意されています。

サイズの後ろに'h'を付けると半角になります。

キー名	埋め込み例	埋め込みコード
h_dot	文章へ埋込	<icon-img key="h_dot" size=1h/>
h_cursor	文章へ埋込	<icon-img key="h_cursor" size=1h/>
h_note4	文章へ埋込	<icon-img key="h_note4" size=1h/>
h_note8	文章へ埋込	<icon-img key="h_note8" size=1h/>
h_note8_r	文章へ埋込	<icon-img key="h_note8_r" size=1h/>
h_note8_lr	文章へ埋込	<icon-img key="h_note8_lr" size=1h/>
h_note8_l	文章へ埋込	<icon-img key="h_note8_l" size=1h/>
h_rest4	文章へ埋込	<icon-img key="h_rest4" size=1h/>
h_rest8	文章へ埋込	<icon-img key="h_rest8" size=1h/>

<p>
文章中に音符<icon-img key=
  "h_note8,h_note4,h_rest8,h_note4,h_note8_r,h_note8_lr,h_note8_l
  ,h_rest8,h_note4,h_note8,h_note4,h_note8,h_rest8,h_rest4"
   size="1h"/>を1hで挿入<br>
文章中に音符<icon-img key=
  "h_note8,h_note4,h_rest8,h_note4,h_note8_r,h_note8_lr,h_note8_l
  ,h_rest8,h_note4,h_note8,h_note4,h_note8,h_rest8,h_rest4"
   size="2h"/>を2hで挿入
</p>

文章中に音符を1hで挿入
文章中に音符を2hで挿入

補足

<hi-icon>ではposを次のように扱っており、標準の位置指定を試すことができます。

      if(pos=='M') ypos='middle';
      else if(pos=='B') ypos='bottom';
      else if(pos=='L') ypos='baseline';
      else if(pos=='T') ypos='top';
      else if(pos=='c'){
         ypos=((height-1)*(-0.5)-0.12)+'em';
         }
      else if(pos=='t'){
         ypos=((height-1)*(-0.9)-0.12)+'em';
         }
      else{
         ypos=(height*parseFloat(pos))+'em';
         }

2024年9月 8日 (日) ウェブログ・ココログ関連 | 固定リンク
Tweet

万象酔歩

あれやこれやと

携帯URL

最近の記事

◆WEB画面文章中にアイコンを文字の様に入れる

pos無し	size=1:,size=1.5:,size=2:,size=3:
pos='c'	size=1:,size=1.5:,size=2:,size=3:
pos='t'	size=1:,size=1.5:,size=2:,size=3:
pos='0.1'	size=1:,size=1.5:,size=2:,size=3:
pos='-0.8'	size=1:,size=1.5:,size=2:,size=3: