半角罫線
◆ 同じフォントでもコンソールだと罫線が半角なのにエディタにコピペしたら全角になる
◆ フォントに文字がなくてだいたいフォントが別になってる？
◆ meiryoke_console や ms gothic (monospace) だと二重罫線にしたら半角表示
◆ consolas は通常の罫線でも半角表示なので consolas 使える環境に限るなら一番良さそう
◆ \u255b がフォントによって罫線の向きが違ってる
◆ フォントに文字がなくてだいたいフォントが別になってる？
◆ meiryoke_console や ms gothic (monospace) だと二重罫線にしたら半角表示
◆ consolas は通常の罫線でも半角表示なので consolas 使える環境に限るなら一番良さそう
◆ \u255b がフォントによって罫線の向きが違ってる
┌ とか ┐とかです
前に eshost の記事を書いたときに困ったのですがコンソールでの見た目と それをコピペしてエディタやブラウザでみたときの見た目が違います
罫線の部分がずれています
少し調べてみるとコンソールで使われてる文字は普段から見る全角の ┌ と同じでした
コンソールでは半角になる別の Unicode の文字だけどコピペしたら余計な気遣いで変換されてるのかもと考えたのですがそういうことはないようです
同じ文字なのにコンソールでは横幅が小さく半角サイズで表示されていました
またコンソール上でも半角だったり全角だったりします
CUI エディタの micro で入力したとき
日本語と同じサイズの全角です
cat でこのテキストファイルを表示すると
横幅が小さく半角サイズです
よく見てみると micro ではちょっと薄い灰色の線が出来ていて自動で幅を補ってくれてるようにも見えます
ただ 罫線の線が二重になってる版 ┏ ではエディタでもなぜか半角表示になりました
指定したフォントがないときの自動で選択されるフォントで違ってきている気もします
とりあえず 見た目をあわせるために 二重罫線に変換してみると
綺麗に揃いました
フォントは meiryoke_console というものなのですが 横線の二重罫線だけ変に目立っていて全体としてはあまり綺麗ではないです
それにこのフォントはすべての人がインストールしてるフォントでもないので揃ってるかどうかが人によって異なります
一応 monospace (Windows の Chrome だと ms gothic) でも二重罫線が半角になりましたけど このフォントは綺麗じゃないのと Windows 以外では半角にならないかもしれません
フォント共通で半角表示する罫線がほしいものです
ところで変換方法はこれに通すだけです
このコードを実行するときに気づいたのですが consolas だと通常の罫線でも半角表示でした
でも consolas もたしか Windows だけだったと思います
全環境で入っていて同じ幅で表示されるフォントがほしいです
横に同じフォント 縦に同じ文字で罫線を表示します
一見すると何の問題もないのですが 左から 12 番目 \u255b がおかしいです
この文字だけを並べて見ると
フォントによって文字が違っています
一番多い F を鏡に移したような文字はフォントに対応する文字がないときの表示のようです
monospace は同じ文字ですが よくみると微妙に見た目が違っています
fantasy, arial, century が同じで F を上下に反転させたような文字です
consolas と courier はそれぞれちょっと違いますが fantasy と同じ文字です
周りの並びからするとこっちが正しいようです
いったいどうしてこんなことになってるのでしょうね
前に eshost の記事を書いたときに困ったのですがコンソールでの見た目と それをコピペしてエディタやブラウザでみたときの見た目が違います
罫線の部分がずれています
少し調べてみるとコンソールで使われてる文字は普段から見る全角の ┌ と同じでした
コンソールでは半角になる別の Unicode の文字だけどコピペしたら余計な気遣いで変換されてるのかもと考えたのですがそういうことはないようです
同じ文字なのにコンソールでは横幅が小さく半角サイズで表示されていました
またコンソール上でも半角だったり全角だったりします
CUI エディタの micro で入力したとき
日本語と同じサイズの全角です
cat でこのテキストファイルを表示すると
横幅が小さく半角サイズです
よく見てみると micro ではちょっと薄い灰色の線が出来ていて自動で幅を補ってくれてるようにも見えます
フォント？
フォントの問題かとも思ってエディタのフォントをコンソールに合わせたのですが変わりありませんただ 罫線の線が二重になってる版 ┏ ではエディタでもなぜか半角表示になりました
指定したフォントがないときの自動で選択されるフォントで違ってきている気もします
とりあえず 見た目をあわせるために 二重罫線に変換してみると
綺麗に揃いました
フォントは meiryoke_console というものなのですが 横線の二重罫線だけ変に目立っていて全体としてはあまり綺麗ではないです
それにこのフォントはすべての人がインストールしてるフォントでもないので揃ってるかどうかが人によって異なります
一応 monospace (Windows の Chrome だと ms gothic) でも二重罫線が半角になりましたけど このフォントは綺麗じゃないのと Windows 以外では半角にならないかもしれません
フォント共通で半角表示する罫線がほしいものです
ところで変換方法はこれに通すだけです
const map = {
"─": "═",
"│": "║",
"┌": "╔",
"┬": "╦",
"┐": "╗",
"├": "╠",
"┼": "╬",
"┤": "╣",
"└": "╚",
"┴": "╩",
"┘": "╝",
}
text.replace(new RegExp(Object.keys(map).join("|"), "g"), e => map[e])
"─": "═",
"│": "║",
"┌": "╔",
"┬": "╦",
"┐": "╗",
"├": "╠",
"┼": "╬",
"┤": "╣",
"└": "╚",
"┴": "╩",
"┘": "╝",
}
text.replace(new RegExp(Object.keys(map).join("|"), "g"), e => map[e])
このコードを実行するときに気づいたのですが consolas だと通常の罫線でも半角表示でした
でも consolas もたしか Windows だけだったと思います
全環境で入っていて同じ幅で表示されるフォントがほしいです
おまけ
罫線を調べているとおかしなものを見つけましたconst fonts = [
"cursive",
"sans-serif",
"serif",
"fantasy",
"monospace",
"arial",
"century",
"consolas",
"meiryo",
"meiryo ui",
"yu gothic",
"yu gothic ui",
"courier",
"cambria",
]
const chars = Array.from(Array(30), (e, i) => String.fromCharCode("\u2550".charCodeAt() + i))
const row_tpl = `<tr style="font-family: ###;">${chars.map(e => "<td>" + e + "</td>").join("")}</tr>`
document.body.innerHTML = "<table>" + fonts.map(e => row_tpl.replace(/###/, e)).join("") + "</table>"
"cursive",
"sans-serif",
"serif",
"fantasy",
"monospace",
"arial",
"century",
"consolas",
"meiryo",
"meiryo ui",
"yu gothic",
"yu gothic ui",
"courier",
"cambria",
]
const chars = Array.from(Array(30), (e, i) => String.fromCharCode("\u2550".charCodeAt() + i))
const row_tpl = `<tr style="font-family: ###;">${chars.map(e => "<td>" + e + "</td>").join("")}</tr>`
document.body.innerHTML = "<table>" + fonts.map(e => row_tpl.replace(/###/, e)).join("") + "</table>"
横に同じフォント 縦に同じ文字で罫線を表示します
一見すると何の問題もないのですが 左から 12 番目 \u255b がおかしいです
この文字だけを並べて見ると
const fonts = [
"cursive",
"sans-serif",
"serif",
"fantasy",
"monospace",
"arial",
"century",
"consolas",
"meiryo",
"meiryo ui",
"yu gothic",
"yu gothic ui",
"courier",
"cambria",
]
const span_tpl = `<span style="font-family: ###;">\u255b</span>`
document.body.innerHTML = fonts.map(e => span_tpl.replace(/###/, e)).join("")
"cursive",
"sans-serif",
"serif",
"fantasy",
"monospace",
"arial",
"century",
"consolas",
"meiryo",
"meiryo ui",
"yu gothic",
"yu gothic ui",
"courier",
"cambria",
]
const span_tpl = `<span style="font-family: ###;">\u255b</span>`
document.body.innerHTML = fonts.map(e => span_tpl.replace(/###/, e)).join("")
フォントによって文字が違っています
一番多い F を鏡に移したような文字はフォントに対応する文字がないときの表示のようです
monospace は同じ文字ですが よくみると微妙に見た目が違っています
fantasy, arial, century が同じで F を上下に反転させたような文字です
consolas と courier はそれぞれちょっと違いますが fantasy と同じ文字です
周りの並びからするとこっちが正しいようです
いったいどうしてこんなことになってるのでしょうね
