[html]object要素で表示した文字のフォントを変更したい。

Question

前提・実現したいこと

txtで保存した小説を、コピペせずに<object>を使ってサイトに表示し見やすい大きさに変更したい。

発生している問題・エラーメッセージ

フォントサイズが変わらない

該当のソースコード

<div><object data="./01.txt" id="noveltext" type="txt/plain"></object></div>

div{
	height: 100%;
	background-color: rgba(255,255,255,0.5);
}
@media(min-width:1330px){
	div{
	width: 80%;
	margin: 0 auto;
	height: 100%;
  }
}
object{
	width: 100%;
	height: 20em;
	overflow: none;
	padding: auto 0;
	font-family: inherit;
	font-size: 200%;
}

試したこと

上記の通りの他に
divをh1にする。

補足情報

html5
css3

Answer 1

objectタグが読み込むのは外部リソースなので、色々と私の方でも確認してみましたが、
読み込んでいる側からcssなどをあてるのはできないものと思われます。

01.txtの内容を何かしら変更できるのであれば、いっそhtmlにしてしまってその中で装飾したものをtype=text/htmlで読み込むか、

変更できないのであれば、javascriptで読み込んで表示されては？
読み込んで表示する先にcssあてておけば問題なく実現できると思います。

Comments

[snowshink]

いろいろなサイトを参考にすると、ボタン等でファイルを選択するようになっています。
読み込むファイルを設定しておいて読み込ませる方法はありますか？

[m.ts10806]

おそらく検索結果の上の方しか見られてないのだと思いますが、
http://mattintosh.hatenablog.com/entry/20151123/1448272437
https://teratail.com/questions/19943
とか。
ファイルを選択するのも直読み込みも同じです。
選んだものを読み込むか、もともとあるものを指定するかの違いです。

改行は変換する必要があります。
改行コード→<br />に変換するように調整してください。

それかpreタグ内に出力する。
http://www.htmq.com/html5/pre.shtml
> 半角スペースや改行をそのまま表示する際に使用します

Answer 2

objectにこだわらず、「テキストファイルを読み込んで表示する」というのが目的であれば、
Ajaxで読み込むのもありかと思います。

Comments

[snowshink]

ajaxで読み込んだ結果、改行とインデントが無視？されてしまいます。改行等も考慮したひょうじをするにはどうしたらよいでしょうか。

[kszk311]

CSSで、white-space: pre;を当てるのがいちばん楽かと思います。