I am trying to print out a chessboard inside a streamlit message. I am trying to print it inside a code block, but the whitespaces donβt align as in the terminal. Is there any way to solve this issue?
This is how the chessboard now looks inside the chat: This is how the chessboard now looks inside the chat
This is an example of what I am trying to print out
Itβs a bit tough to test what youβre experiencing without some sample code, but this code seems to work fine
import streamlit as st
# Define a function to generate a text-and-unicode representation of a chess board
def generate_chessboard():
# Unicode characters for each type of chess piece
pieces = {
"K": "\u2654", # White King
"Q": "\u2655", # White Queen
"R": "\u2656", # White Rook
"B": "\u2657", # White Bishop
"N": "\u2658", # White Knight
"P": "\u2659", # White Pawn
"k": "\u265A", # Black King
"q": "\u265B", # Black Queen
"r": "\u265C", # Black Rook
"b": "\u265D", # Black Bishop
"n": "\u265E", # Black Knight
"p": "\u265F", # Black Pawn
".": " ", # Empty square
}
# Define the board layout as a list of strings, where each string represents a row
# A couple of pieces have been moved for demonstration
board_layout = [
"r n b q k b n r",
"p p p p . p p p",
". . . . . . . .",
". . . . p . . .",
". . . . P . . .",
". . . . . . . .",
"P P P P . P P P",
"R N B Q K B N R",
]
# Generate the formatted board as a string
board_str = ""
for i, row in enumerate(reversed(board_layout)):
board_str += f'{8 - i} {" ".join([pieces[piece] for piece in row.split()])}\n'
board_str += " a b c d e f g h"
return board_str
# Generate and print the chessboard
chessboard_str = generate_chessboard()
print(chessboard_str)
st.code(chessboard_str)
I think I might be close to a solution.
I think the problem with using monospace alone is that whitespaces donβt have the same width as other characters. Therefore, it would be optimal to replace whitespaces with
<span style="width: 1ch;"> </span> in order to let it have the same width as other characters.
st.code does not have unsafe_allow_html, so I tried putting the chessboard between a bloc of three backticks and using st.write. I set unsafe_allow_html=True and replaced whitespaces inside the code block, but now I get the whole HTML as text within the code block. This is because, for some reason, β<β and β>β are put in the HTML instead of the tags.
I guess, it is not possible to insert HTML inside a code block, but at the same time I need a code block in order to preserve the whitespaces.
However, thank you a lot for your previous answers. Do you have any idea on how I could move on?
Thanks
I will add that you will need to set up a font that actually supports the chess piece characters. Otherwise they will default to whatever font is available that do have them implemented, not necessarily a monospaced font.