本文にスキップする

Select your region & language

Global

Region

インラインテキスト+インラインCSS

ご提供いただいたソースをそのまま使用しているため、見出しデザインがテンプレートデザインと異なる点はお見捨ておきください。
※画像のパスはファイルマネージャー上の画像を読み込むため「/images」を下記に差し替えております。
/hubfs/48792601/images/画像名.png

横書き日本語の場合

オリジナル画像

現在のグラフ画像では画像内の文字がラスタライズ化されたものであるため、ブラウザの自動翻訳機能を使っても外国語に翻訳されない問題があります。

交流波形

文字無し画像+通常テキスト

画像内ラスタライズ化テキストを削除し、代わりに通常テキストを画像の上から配置することにより、ブラウザの自動翻訳翻訳機能によってグラフ内の文字を外国語に翻訳可能にします。

交流波形
リンキング
スパイク
プレシュート
プレシュート
チルト
ベースライン

縦書き日本語の場合

オリジナル画像

元波形を T 時間分切り取る。

文字無し画像+通常テキスト(無調整版)

元画像と同じ位置にテキストを配置すると、↓画像のように日本語表示では問題はないが、
自動翻訳機能で英語にするとテキストが伸びてしまい、画像と干渉するケースが発生する(この場合は翻訳語テキストが画像内の「B」に被さってしまう)

元波形を T 時間分切り取る。
不連続点
不連続点

文字無し画像+通常テキスト(調整版)

翻訳によるテキストの干渉が発生した場合は、↓画像のようにテキスト位置を調整して干渉しないようにする(必要に応じて文字サイズなどを調整することも有り)

元波形を T 時間分切り取る。
不連続点
不連続点

90度回転した日本語の場合

オリジナル画像

元波形を T 時間分切り取る。

文字無し画像+通常テキスト

「transform: rotate(-90deg); 」により90度回転を設定する。

geminiへのテスト依頼結果
(加速度)

複数テキスト+等間隔テキストの場合

オリジナル画像

元波形を T 時間分切り取る。

文字無し画像+通常テキスト

元画像の「インパルスハンマ」の「ハンマ」の等間隔部分は「text-align-last: justify;」を設定した。

2自由度系の振動実験結果
1次モード
インパルス
ハンマ
2次モード
インパルス
ハンマ
2自由度系
加振力波形
加振力波形のパワースペクトル
加速度
加速度のパワースペクトル
周波数応答関数 (ボード線図)
位相
アクセレランス
固有周波数1
固有周波数2

枠線で囲まれたテキストの場合

オリジナル画像

元波形を T 時間分切り取る。

文字無し画像+通常テキスト

枠線部分はdivに「border」を設定することで再現した。
ただし、「振動が下がりにくい位置」はテキスト位置を「left」で設定すると、英語テキスト化で文が長くなった際に画像の右限界に達して改行が発生し、グラフを隠してしまう問題が発生してしまいます。
そのような場合は「right」でテキスト位置を設定すると、文が左方向に伸びるので改行を回避できます。
(その他、英語化によるテキストとグラフの干渉を避けるために、各テキストの位置を若干調整した)

振動モードと周波数応答
加速度/力
点線:動質量
(力/加速度)
周波数
加速度/力
点線:動質量
(力/加速度)
周波数
振動が下がりやすい位置
振動が下がりにくい位置
振動モード
f1 の 節
f1 の 腹

三次元回転が必要なテキストの場合

オリジナル画像

このような例は極めて少数であり、もしかしたらこの画像だけかもしれません。

三次元回転テスト

文字無し画像+通常テキスト

「transform:rotateX(〇deg) rotateY(〇deg) skew(〇deg)」を用いてテキストの三次元回転を行った。
また、一部では「 scale(〇, 〇);」を用いて、回転したテキストの見た目を整えた。
その他、英文化による位置ずれの影響を最小限に抑えるため、文字サイズやテキスト位置などを若干調整した。

三次元回転テスト
虚部の変動 i sin θ
複素平面
虚部

実部
実部の変動 cos θ