レスポンシブ対応で画像からテキストに置き換え、任意の場所で改行したい

Question

PC専用にデザインされたサイトをレスポンシブ対応させるにあたり、画像で作られた見出しを以下のような方法でテキストに置き換えました。
そして、置き換えた後のテキストを任意の場所で改行したいのですが、その方法がわからず困っています。

<h2 class="rwd_txt"><img src="img/title_example.png" alt="タイトル画像ですテキストにして任意の場所で改行したいです"></h2>

.rwd_txt:after {
	content: attr(data-label);
}
.rwd_txt img {
	display: none;
}

$(".rwd_txt").each(function(i){
	var txt = $("img", this).attr("alt");
	$(this).attr("data-label", txt);
});

画像で作られた見出しのレスポンシブ対応には、他にも方法が考えられます。
例えば、
[方法１]PC用とスマホ用で2種類の画像を用意し、cssのdiplayプロパティで切り替える。
[方法２]HTMLではテキストを入れておき、cssで背景画像にする。テキストはtext-index:-9999pxで画面枠外へ追い出す。
などが検討にあがりましたが、以下の観点から上記方法に行き着きました。

・クライアントがSEOを最重要視している
・スパム扱いされることを懸念
・デザイン上、画像で作られた見出しの数が多い

あとは、任意の箇所で改行ができれば言うことなしの状態です。ご教授いただければ光栄です。
他にも良い方法があればご提案いただけると助かります、今の方法に固執しているわけではありません。
よろしくお願いします。

Answer 1

ベストアンサーにさせていただいた方の考えをヒントにした方法です。

htmlではスマホ時の記述をします。カスタムデータ属性で画像パスをセットしておきます。
PC時のみJSでimgタグを生成します。
imgタグのsrcにはカスタムデータ属性の画像パスをセット、スマホ用のテキストから<br>タグを削除したものをaltにセットします。htmlのテキストは空に置き換えてみました。

コメントにも書いていますが、ややまどろっこしい気がします・・・

<h2 class="rwd_txt2" data-imgpath="img/example_title.png">タイトル画像です<br>テキストにして<br>任意の場所で改行したいです</h2>

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
	$('.rwd_txt2').each(function(i){
		var imgpath = $(this).attr('data-imgpath');
		var imgalt = $(this).text();
		imgalt = imgalt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, "");
		$(this).text("");
		$(this).append('<img src="' + imgpath + '" alt="' + imgalt + '">');
	});
}

Answer 2

「PC版の画像のaltにはSP版の任意のテキストが入る」という逆のアプローチはどうでしょう？
幅はSPサイズのときはそのままでPCサイズならば、テキストから<br>を削除してimgのaltに入れるという感じで。

Comments

[PenelopeG]

ありがとうございます。
PC専用デザインを元に考えていたので、逆のアプローチとは目からウロコ状態です(笑
質問文に記述している[方法２]でcssのみに頼らず、JSも使ってみるという感じでしょうか。
さっそく試してみたいと思います。

[gin]

CSSは画像⇔テキストのon/offくらいですね。＜装飾以外

<h2 class="rwd_txt"><span class="text">タイトル画像です<br>テキストにして<br>任意の場所で<br>改行したいです</span><img src="img/title_example.png" alt=""></h2>

こうしておいて、SPのときはimg{display:none;}、PCのときは.text{display:none;}です。
あとはPC版はJSで.textのテキストを取得し、<br>を取ってimgのaltに入れます。
でもなんかこうかくと最初からimgのaltにテキストをいれておいてもいいと思いますが…^^;

[PenelopeG]

想像以上にシンプルな方法ですね！後からみてもわかりやすいところがいいです。
どうやら、私は難しく考えてしまっていたようで、
htmlのカスタムデータ属性で画像パスをセットしておいて、スマホの時だけJSでカスタムデータ属性の画像パスをsrcに、テキストから<br>を削除したものをaltにセットしたimgタグを生成するという手法を試していました。
こちらの方が今からの修正は少なくてすみますが、まどろっこしい気がします・・・

[PenelopeG]

訂正です。「スマホの時だけ」ではなく「PCの時だけ」です。
詳しい方法は解決方法に記載しました。

Answer 3

テキストをspanタグで囲い、spanの幅をjavascriptなどで調整するという手段はいかがでしょうか。

Comments

[PenelopeG]

なるほど、外枠を用意して改行させるという方法ですね。
ただ、見出しテキストの文脈にあわせて改行を行いたいので、行ごとに横幅が異なるパターンが存在します。（改行により3行になり、1行目と2行目の長さが異なる。といった感じです。）
なので、ご提案の方法では実現が難しそうです。
説明が不足しており恐縮ですが、さっそくのご回答に感謝します。

[t_obara]

本来的に文脈とはどのように判断して、どのように改行をするのでしょうか？
その判断が機械的にできるのであれば、そのように実装すれば良いだけのような。

http://chasen.org/~taku/software/TinySegmenter/
javascriptのみで実装された形態素解析もあるので、そこにかけて、その結果でとかね。
手作業が入って良いのであれば、区切る場所をどこかに設定して、それを参照しながら
javascriptで調整するとか。

[PenelopeG]

そうですね。改行箇所が機械的に判断できれば、このような方法もあるのだと勉強になりました。
今回は、見た目いい感じに改行したいということなので、別の機会に参考にさせていただきたいと思います。
追加の情報までいただきましてありがとうございました。