Linuxでコンソールアプリを実行した画面をコピーしてHTMLで表示したところ、綺麗に表示されません。  
どうすれば綺麗に表示できるのでしょうか？

# 再現手順

Ubuntu20.04で以下のコードを実行して出てきた画面を、gnome-
terminalの「HTMLとしてコピー」を使ってhtmlファイルとして保存します。

## テキストアプリ(bash)

```

    selected=$(
        for i in `seq 50`;do
            echo "$i" "item$i"
        done |
        xargs whiptail --menu '選択して下さい' 20 40 12 3>&2 2>&1 1>&3)
    
```

## HTML

保存されたHTMLは以下のようになっています。

```

    <pre>
    
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">┌──────────────────────────────────────┐</font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│ 選択して下さい                       │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             </font></span><span style="background-color:#CC0000"><font color="#D3D7CF">1  item1 </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">  ↑             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             2  item2   ▮             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             3  item3   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             4  item4   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             5  item5   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             6  item6   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             7  item7   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             8  item8   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             9  item9   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             10 item10  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             11 item11  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             12 item12  ↓             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│       &lt;了解&gt;         &lt;取消&gt;          │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">└──────────────────────────────────────┘</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                     </font></span><span style="background-color:#2E3436"><font color="#EEEEEC">                                        </font></span>
    
    </pre>
```

## Stackoverflowだと...

StackoverflowでHTMLをそのまま貼り付けるとこんな表示です。

```

    
                        ┌──────────────────────────────────────┐
                        │ 選択して下さい                       │ 
                        │                                      │ 
                        │             1  item1   ↑             │ 
                        │             2  item2   ▮             │ 
                        │             3  item3   ▒             │ 
                        │             4  item4   ▒             │ 
                        │             5  item5   ▒             │ 
                        │             6  item6   ▒             │ 
                        │             7  item7   ▒             │ 
                        │             8  item8   ▒             │ 
                        │             9  item9   ▒             │ 
                        │             10 item10  ▒             │ 
                        │             11 item11  ▒             │ 
                        │             12 item12  ↓             │ 
                        │                                      │ 
                        │                                      │ 
                        │       <了解>         <取消>          │ 
                        │                                      │ 
                        └──────────────────────────────────────┘ 
                                                                 
    
    
```

ここではプレビューで見る限り、スタイルが消える反面、フォントが適切に選択されており、保存されたファイルをブラウザで見るよりは見れる表示になっています。

## 原因調査

### フォントと行間指定

すぐ分かるとおり、フォントと行間の指定がないので、先のHTMLに以下のコードを追記してみたのですが、改善はするものの綺麗とは言い難い状況です。

```

    <style>
    pre {
    line-height: 1.0;
    font-family: "menlo","lucida console","consolas","courier new","courier",monospace;
    }
    </style>
    <pre>
    
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">┌──────────────────────────────────────┐</font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│ 選択して下さい                       │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             </font></span><span style="background-color:#CC0000"><font color="#D3D7CF">1  item1 </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">  ↑             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             2  item2   ▮             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             3  item3   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             4  item4   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             5  item5   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             6  item6   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             7  item7   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             8  item8   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             9  item9   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             10 item10  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             11 item11  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             12 item12  ↓             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│       &lt;了解&gt;         &lt;取消&gt;          │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">└──────────────────────────────────────┘</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                     </font></span><span style="background-color:#2E3436"><font color="#EEEEEC">                                        </font></span>
    
    </pre>
```

### 複数の固定幅フォント

Windowsのメモ帳などで見ればすぐに分かりますが、複数のフォントが使用されていることが明白です。  
確認用に以下のスクリプトをHTMLの後ろに追加しました。  

```

    <style>
    pre {
        line-height: 1.0;
        font-family: "menlo","lucida console","consolas","courier new","courier",monospace;
    }
    </style>
    <pre>
    
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">┌──────────────────────────────────────┐</font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│ 選択して下さい                       │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             </font></span><span style="background-color:#CC0000"><font color="#D3D7CF">1  item1 </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">  ↑             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             2  item2   ▮             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             3  item3   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             4  item4   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             5  item5   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             6  item6   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             7  item7   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             8  item8   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             9  item9   ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             10 item10  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             11 item11  ▒             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│             12 item12  ↓             │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│       &lt;了解&gt;         &lt;取消&gt;          │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">│                                      │</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                    </font></span><span style="background-color:#D3D7CF"><font color="#2E3436">└──────────────────────────────────────┘</font></span><span style="background-color:#2E3436"><font color="#EEEEEC"> </font></span>
    <span style="background-color:#75507B"><font color="#EEEEEC">                     </font></span><span style="background-color:#2E3436"><font color="#EEEEEC">                                        </font></span>
    
    </pre>
    <pre><span id="test"></span></pre>
    <script>
    (function(){ 
    const test = document.getElementById('test');
    const N = 1000;
    const content = document.querySelector('pre').textContent;
    const width = {};
    [].forEach.call(content, (ch) => {
        if (width[ch] == null) {
            test.textContent = [...Array(N)].map(()=>ch).join('');
            width[ch] = test.offsetWidth / N;
            const codePoint = "0x" + ch.codePointAt(0).toString(16);
            console.log(`[${ch}(${codePoint})]: ${width[ch]}px`);
        }
    });
    })();
    </script>
```

Windowsのchrome上でのコンソール出力は以下のとおりです。

```

    [
    (0xa)]: 0px
    [ (0x20)]: 9.641px
    [┌(0x250c)]: 9.641px
    [─(0x2500)]: 9.641px
    [┐(0x2510)]: 9.641px
    [│(0x2502)]: 9.641px
    [選(0x9078)]: 16px
    [択(0x629e)]: 16px
    [し(0x3057)]: 16px
    [て(0x3066)]: 16px
    [下(0x4e0b)]: 16px
    [さ(0x3055)]: 16px
    [い(0x3044)]: 16px
    [1(0x31)]: 9.641px
    [i(0x69)]: 9.641px
    [t(0x74)]: 9.641px
    [e(0x65)]: 9.641px
    [m(0x6d)]: 9.641px
    [↑(0x2191)]: 9.641px
    [2(0x32)]: 9.641px
    [▮(0x25ae)]: 8px
    [3(0x33)]: 9.641px
    [▒(0x2592)]: 9.641px
    [4(0x34)]: 9.641px
    [5(0x35)]: 9.641px
    [6(0x36)]: 9.641px
    [7(0x37)]: 9.641px
    [8(0x38)]: 9.641px
    [9(0x39)]: 9.641px
    [0(0x30)]: 9.641px
    [↓(0x2193)]: 9.641px
    [<(0x3c)]: 9.641px
    [了(0x4e86)]: 16px
    [解(0x89e3)]: 16px
    [>(0x3e)]: 9.641px
    [取(0x53d6)]: 16px
    [消(0x6d88)]: 16px
    [└(0x2514)]: 9.641px
    [┘(0x2518)]: 9.641px
    
```

### 質問

複数の固定幅フォントに対してうまい幅指定方法、もしくはそれに準ずるうまい方法はないのでしょうか？  
(罫線に使用されるフォントの幅を基準とした方法)  
可能であればJavaScriptは使いたくありません(そこまでするなら画像にするかも)

#### 追記

私が対処できればそれでいいわけではなく、検索してここに来た方が必要な回答はJavaScriptでの回答なのかもしれません。一文字ずつspanにすることで対応可能な分野である以上、JavaScriptを外す選択肢はありえないので、ご理解ください。

#### 追記2

低評価したい方はコメントに具体的な指摘を同時にお願いします。仮に同じ内容でも無言では私怨にしか見えません。  
「 _ **適切な指摘**_ 」なら対応しますよ。
CC BY-SA 4.0
2022-11-16T12:42:26.713
92262
2022-11-18T11:32:13.087
2022-11-18T11:32:13.087
54957
54957
question
javascript html css
テキスト画面をコピーしてHTMLで表示したい
# 回答

以下のWebフォントを指定して固定幅を合わせる。  
<https://number-shot.net/blog/illusion-the-console-terminal-font/>

## 詳細

以下をダウンロードして展開し、webfontフォルダにHTMLを配置する。  
<https://github.com/tomonic-x/Illusion/releases/download/v0.2.5/Illusion-0.2.5.zip>

配置したHTMLファイルのStyle要素を以下のように修正してブラウザで表示する。

```

    <link href="./Illusion.css" rel="stylesheet">
    <style>
    pre {
        line-height: 1.25;
        font-family: "Illusion N", monospace;
    }
    </style>
    
```

## 最後に

完全に目的に適合したフォントが運良く見つかった感じです。固定幅と言いながら幅の違うフォントがいくつもあったり、East Asian
Widthとやらに絶望したりしましたが、他に方法がなければしばらくこれで行こうかと思います。
CC BY-SA 4.0
2022-11-17T04:55:07.127
92273
2022-11-17T04:55:07.127
54957
92262
answer