-
この掲示板を <pre> 表示にする試み - reiria
2015/01/09 (Fri) 22:16:58
<script type="text/javascript">
<!--
// この掲示板を <pre> 表示にする試み by reiria
/*
<body>
追加 <script>
追加 <form><input id="prex">
<div id="body">
<p id="title">
追加 <script>
<p id="navi_bar">
<div class="topic">
<div class="topic2">
<p class="subj">
<span class="subj">
<span class="name">
<p class="date">
<span class="date">
<p class="msg"> overflowX
追加 <form><input id="prex?"> display
whiteSpace 設定 <span class="lh12"> lineHeight=1.2em whiteSpace
置換 <?tags><?/tags>
*/
var is1st = true;
var is2nd = false;
function prex(index)
{
var e = document.getElementById("prex");
if (e) {
if (is1st) {
e.onclick = function () { prex(-1); }
e.checked = true;
}
var ispre_all = e.checked;
var e = document.getElementsByClassName("lh12");
if (e) {
for (var n = 0; n < e.length; n++) {
if (e[n].parentNode.className === "msg") {
if (index == -1 || index == n) {
if (is1st) {
var ee = document.createElement("form");
var i = document.createElement("input");
//if (ee && i) {
i.type = "checkbox";
// i.onclick = new Function("prex(" + n + ")");
i.onclick = (function (nn) { return function () { prex(nn); }})(n);
i.checked = false;
i.value = "off";
i.id = "prex" + n;
ee.appendChild(i);
e[n].parentNode.insertBefore(ee, e[n]);
// e[n].parentNode.insertBefore(ee, e[n].nextSibling);
// e[n].parentNode.appendChild(ee);
}
var ee = document.getElementById("prex" + n);
// var ee = e[n].previousSibling;
//if (ee) {
var ispre = index == -1 ? ispre_all: ee.checked;
e[n].style.whiteSpace = ispre ? "pre-wrap": "normal"; // -wrap for Firefox
// e[n].parentNode.style.overflowX = ispre ? "scroll": "auto";
iscomment = false;
if (ispre) {
if (ee.value == "off") {
e[n].innerHTML = e[n].innerHTML.replace(/<br[ /]*>/gi, "");
e[n].innerHTML = e[n].innerHTML.replace(/<\?!--([\s\S]*?)--\?>/g, "<!--$1-->");
e[n].innerHTML = e[n].innerHTML.replace(re_off, repx);
}
} else {
if (ee.value == "on") {
e[n].innerHTML = e[n].innerHTML.replace(re_on, repx);
e[n].innerHTML = e[n].innerHTML.replace(/<!--([\s\S]*?)-->/g, "<?!--$1--?>");
e[n].innerHTML = e[n].innerHTML.replace(/\n/g, "<br />\n");
}
}
ee.checked = ispre;
ee.value = ee.checked ? "on": "off";
if (index == -1) {
ee.style.display = ispre_all ? "block": "none";
/*
if (!ispre_all) {
ee.parentNode.removeChild(ee);
is2nd = true;
}
*/
} else {
break;
}
}}
}
is1st = is2nd;
is2nd = false;
}}}
var tags = [
"abbr", "acronym",
"b", "bdo", "big", "blink", "blockquote",
"caption", "center", "cite", "code", "col", "colgroup",
"dd", "del", "dfn", "div", "dl", "dt",
"em",
"font",
"h1", "h2", "h3", "h4", "h5", "h6", "hr",
"i", "ins",
"kbd",
"li",
"marquee", "menu",
"ol",
"p", "pre",
"q",
"rb", "rp", "rt", "ruby",
"s", "samp", "small", "span", "strike", "strong", "sub", "sup",
"table", "tbody", "td", "tfoot", "th", "thead", "tr", "tt",
"u", "ul",
"var"
];
var re_off = /(((<!--|-->)[\s\S]*?)*?)(<(\?\/?[a-zA-Z]+.*?)>)/g;
var re_on = /(((<!--|-->)[\s\S]*?)*?)(<(\/?[a-zA-Z]+.*?)>)/g;
var iscomment = false;
function repx(a, ca, c, a3, a4, t)
{
/*
a0 マッチ全体
a1 tag 前全体 (<!--|-->)[\s\S]* 入れ子 → a1 != a2
a2 tag 前直近 (<!--|-->)[\s\S]*
a3 tag 前直近 (<!--|-->) のつもりだったけど a2 が存在しても a3 undefined の場合があって使えない (IE)
a4 tag 全体
a5 tag 内
a6 文字列位置
a7 文字列全体
*/
if (c) iscomment = c.charAt(0) == '<';
//var s = "repx\n";
//s += "comment = " + iscomment + "\n";
//for (var n = 0; n < arguments.length; n++) s += n + " = \"" + arguments[n] + "\"\n";
//alert(s);
if (!iscomment) {
var m = t.match(/^(\??)\/?(\S+).*/);
for (var n = 0; n < tags.length; n++) {
if (tags[n] == m[2].toLowerCase()) {
return ca + (m[1] == "?" ? "<" + t.substr(1) + ">": "<?" + t + ">");
}
}
}
return a;
}
function add_onload(f)
{
try {
window.addEventListener("load", f, false);
} catch (e) {
window.attachEvent("onload", f);
}
}
add_onload(function () { prex(-1); });
//-->
</script>
<form><input type="checkbox" id="prex"><pre>表示</form>
Re: この掲示板を <pre> 表示にする試み - reiria
2015/01/11 (Sun) 17:29:26
スクロールバーを付けたい (特に横方向) けど、どうにも Firefox 以外うまくいかない。
スクロールバーは表示されるけどボックス右端で改行されてしまう。
仕方なくフォントサイズを小さくしたものの読みにくい(^^;
あと、<pre> は TAB 幅 8 文字で、white-space: pre だと TAB 幅 4 文字になるようだけど、
両者が違うのって何でだろう。IE Firefox Chrome Opera いずれも同様。
Re: この掲示板を <pre> 表示にする試み - reiria
2016/01/02 (Sat) 15:27:41
１年間ほど問題なさそうだったこともあり、今年からは <pre> 表示をデフォルトにしてみました。
今まで TAB や半角空白のインデントを全角空白に変換して書き込んでいましたが、
今年からは空白インデントをそのまま書いていきたいです(^^;
Re: この掲示板を <pre> 表示にする試み - reiria
2016/01/02 (Sat) 15:30:03
・ブラウザ画面左上のチェックボックスは <pre> 表示有効／無効、レス内左上のチェックボックス有無。
・レス内左上のチェックボックスはそのレスのみ <pre> 表示有効／無効。
となっています。
Re: この掲示板を <pre> 表示にする試み - reiria
2016/01/03 (Sun) 15:14:29
書き込みの任意の場所で <pre> </pre> と置換する ＜?pre＞ ＜?/pre＞ のてすと。
通常の white-space: pre は TAB 幅 4 文字でフォントはそのまま、<pre> は TAB 幅 8 文字で等幅フォント。
<pre> だと改行のレイアウトが微妙に変わるのが困りもの。
てすと
<?pre>
てすと
<?/pre>
てすと
Re: この掲示板を <pre> 表示にする試み - reiria
2016/01/05 (Tue) 15:19:30
もういっそ全てのタグ使えるように何でもありヒャッハーにしました(^^;
基本的にアルファベットのタグの < の直後に ? を書けば何でも無制限に置換します。
コメントタグも同様ですが、コメントタグの終わりは > の直前に ? を書きます。
? の前後いずれかが空白なら置換しません。
つまり、
<?pre>
<?/pre>
<?!--
--?>
は置換され、
<? pre>
<? /pre>
<? --
-- ?>
は置換されません。
Re: この掲示板を <pre> 表示にする試み - reiria
2016/01/05 (Tue) 17:03:44
と思ってはみたものの、さすがに全てのタグだと危なそうなので限定しとこう。
<?!--
なぜか br 空白 t が禁止ワードに引っ掛かって書き込めない。
当方でそのような禁止ワードは設定していないので運営側の何らかの理由と思われる。
よって <?abbr> の title は応急的に <?abbr id="" title と書いている。
--?>
<?abbr id="" title="A B B R">ABBR<?/abbr>
<?acronym title="A C R O N Y M">ACRONYM<?/acronym>
<?b>B<?/b>
BDO <?bdo dir="rtl">あいうえお<?/bdo>
<?big>BIG<?/big>
<?blink>BLINK<?/blink>
<?blockquote>BLOCKQUOTE<?/blockquote>
<?center>CENTER<?/center>
<?cite>CITE<?/cite>
<?code>CODE<?/code>
<?dl>DL<?dt>DT<?/dt><?dd>DD<?/dd><?/dl>
<?del>DEL<?/del>
<?dfn>DFN<?/dfn>
<?div>DIV<?/div>
<?em>EM<?/em>
<?font color="blue">FONT<?/font>
<?h1>H1<?/h1><?h2>H2<?/h2><?h3>H3<?/h3><?h4>H4<?/h4><?h5>H5<?/h5><?h6>H6<?/h6>
HR<?hr>
<?i>I<?/i>
<?ins>INS<?/ins>
<?kbd>KBS<?/kbd>
<?marquee>MARQUEE<?/marquee>
<?menu>MENU<?li>LI 1<?/li><?li>LI 2<?/li><?li>LI 3<?/li><?/menu>
<?ol>OL<?li>LI 1<?/li><?li>LI 2<?/li><?li>LI 3<?/li><?/ol>
<?p>P<?/p>
<?pre>PRE<?/pre>
<?q>Q<?/q>
<?ruby>RUBY<?rb>RB<?/rb><?rp>RP<?/rp><?rt>RT<?/rt><?/ruby>
<?s>S<?/s>
<?samp>SAMP<?/samp>
<?small>SMALL<?/small>
<?span>SPAN<?/span>
<?strike>STRIKE<?/strike>
<?strong>STRONG<?/strong>
SUB<?sub>SUB<?/sub>
SUP<?sup>SUP<?/sup>
TABLE
<?table border="1">
<?caption>CAPTION<?/caption>
<?colgroup>
<?col width="100">
<?col width="200">
<?/colgroup>
<?thead><?tr><?th>THEAD<?/th><?th>TH<?/th><?/tr><?/thead>
<?tfoot><?tr><?td>TFOOT<?/td><?td>TD<?/td><?/tr><?/tfoot>
<?tbody><?tr><?td>TBODY<?/td><?td>TD<?/td><?/tr><?/tbody>
<?/table>
<?tt>TT<?/tt>
<?u>U<?/u>
<?ul>UL<?li>LI 1<?/li><?li>LI 2<?/li><?li>LI 3<?/li><?/ul>
<?var>VAR<?/var>
Re: この掲示板を <pre> 表示にする試み - reiria
2017/03/22 (Wed) 20:30:08
>あと、<pre> は TAB 幅 8 文字で、white-space: pre だと TAB 幅 4 文字になるようだけど、
>両者が違うのって何でだろう。IE Firefox Chrome Opera いずれも同様。
>通常の white-space: pre は TAB 幅 4 文字でフォントはそのまま、<pre> は TAB 幅 8 文字で等幅フォント。
ってこれ、TAB 幅の文字数の違いじゃなくて、ただ単に空白が等幅フォントかどうかの違いじゃないか(^^;;;;;;
要するに white-space: pre と <pre> いずれも半角空白 8 文字同等、たぶん。
何で今までずっとこんな単純なことに気付かなかったのか・・・思い込みって怖いヌ(;_;)
white-space: pre の場合
←TAB
←半角空白8文字
←全角空白4文字
<pre> の場合
<?pre>
←TAB
←半角空白8文字
←全角空白4文字
<?/pre>