Ascii art在终端下正常复制到网页全部混乱是因为空格符等字符只有终端一半宽度导致的，如何解决？

问题求助❓
1

ascii art在终端下正常复制到网页全部混乱，是因为空格符、点号符等字符只有终端下同样字符的一半宽度导致的，有无python脚本/工具/方法能直接生成网页不变形的ascii art？

  1. 将字符直接复制到APPIN发帖框是乱的，但是加上代码引用就正常了，如下所示（很多网站不支持Markdown也就不行了）：
    _    ____  ____ ___ _   _ _   _
   / \  |  _ \|  _ \_ _| \ | | \ | |
  / _ \ | |_) | |_) | ||  \| |  \| |
 / ___ \|  __/|  __/| || |\  | |\  |
/_/   \_\_|   |_|  |___|_| \_|_| \_|
  1. 下面是直接复制过来后显示的乱的样子：

. _ ____ ____ ___ _ _ _ _
/ \ | _ | _ _ | \ | | \ | |
/ _ \ | |) | |) | || | | | |
/ ___ | __/| __/| || |\ | |\ |
// __| || ||| _|| _|

2

分析原因

Markdown 里有以下机制阻止 ASCII art 的渲染：

  1. 行首连续四个空格会被识别成代码块

  2. 下划线 _ 有语义，会被转成 <em> 或 <strong> 等元素

  3. 反斜杠 \ 有语义，会被识别成转义符，用来去除其他 Markdown 语义字符的语义

  4. 竖线 | 在部分方言中有语义，会被识别成表格

  5. 非空行之间的换行会被识别成空格，需要在行尾额外加两个空格才会转为换行 <br>（部分方言不需要加这两个空格）

另外渲染成 HTML 之后，也有几个因素会导致渲染异常：

  1. 多个普通空格会被合并成一个空格显示

  2. 非等宽字体下，空格、下划线、竖线可能宽度不同

解决方案 1

因此如果要正确渲染 ASCII art，要按以下步骤处理文本：

  1. 把空格转为 HTML 实体 &nbsp;

  2. 把反斜杠转为两个反斜杠 \\

  3. 把下划线转为反斜杠与下划线 \_

  4. 把竖线转为反斜杠与竖线 \|

  5. 除最后一行外，在每行末尾加两个空格

  6. 把以上内容放进 <div> 里，为其添加样式 font-family:monospace;（此处也可以堆一大堆各种系统自带的等宽字体，什么 Courier New、Consolas、Menlo、SF Mono 等等等等……）

以上步骤里，3 和 4 可以互换，但必须在 2 之后。

前四步可以用 python 函数来转换：

def ascii_art(str):
    return str.replace(' ', '&nbsp;').replace('\\', '\\\\').replace('_', '\\_').replace('|', '\\|').replace('\n', ' \n')

转完以后放进 <div> 里，注意里面上下要各空一行：

<div style="font-family:monospace;">

（粘贴在这里）

</div>

解决方案 2

直接用 <pre> 元素包裹起来，:ok_hand: 了。

效果图

image
image2036×1364 213 KB

5 个赞
3

对于不支持Markdown的论坛发帖，如何实现字符画不乱呢？我以前用过一个命令行软件可以把所有字符用_、@、o等填充，这样就不存在字符不等宽的问题，但是现在早已无法记得那个命令行的名字了。

4

不支持 Markdown 就更简单了，直接把空格替换成 &nbsp;，然后设置字体为等宽就搞定了（当然 <pre> 的万能方案总是 OK 的）。

你说的那个软件，即便是把所有的空格填充了，在不用等宽字体的前提下，依然无法保证对齐。因为你无法保证客户端用的字体会不会把 _、@、o 等字符渲染成同一宽度……

5

大部分论坛支持支持bbs code，也可以用［code］标签的。

6

好巧，我最近看到这个项目：

话说现在有什么好用的 ASCII Art 工具么？

1 个赞
7

我测试如下：

  • Discuz论坛回帖不支持<pre>标签。
  • 把空格换成&nbsp;回帖也不会自动转义。

2022-06-15_193753
2022-06-15_193753944×743 20.7 KB

8

ascgen 2

这个不错

10

不是 :joy: ，仔细看了，我只是在回答青蛙仔。

你的问题不是解决了吗

11

哦，我的没解决，在discuz回帖还是会乱码，看我最后发的帖子。

12

Discuz 论坛支持转义字符吗？不支持怎么搞也没用吧。

13

可以试试这个工具？

14

使用命令pyfiglet PYTHON | ./aha --> PYTHON.htm输出html文件后查看其源代码，也是用

标签转义的，Discuz论坛回帖不支持这个标签。


<pre>
 ______   _______ _   _  ___  _   _ 
|  _ \ \ / /_   _| | | |/ _ \| \ | |
| |_) \ V /  | | | |_| | | | |  \| |
|  __/ | |   | | |  _  | |_| | |\  |
|_|    |_|   |_| |_| |_|\___/|_| \_|
                                    

</pre>