the widths of every characters are not the same, ui.textarea

[HackYardo]

Question

Thank you for the awesome web ui lib!
I want to implement something like ui.termianl:

• stdin -> ui.input
• stdoout, stderr -> ui.textarea

However, the widths of every characters in ui.textarea are not the same. So it performs very differently from the real terminals such as Windows Terminal, GNOME Terminal, konsole.

For example:

A B C D
. . . .
1 2 3 4

and:

A  B  C  D
....
 1 2 3 4

And there are no space has been deleted!

[python-and-novella]

log = ui.log()
log.push('AAAA'*9)
log.push('1234'*9)

[HackYardo]

Thank you. But the ui.log is a bit worse than ui.code or ui.textarea, such as: no clear, no auto-scroll-down, no demo, document or example, and even no Quasar/Vue document? So, could I use a python list stack to work with ui.code to implement something like ui.terminal?

[rodja]

You could simply use a monospace font:

content = '''A B C D
. . . .
1 2 3 4'''
ui.textarea(value=content).style('font-family: "Courier New, Courier, monospace;')

[falkoschindler]

Or more generically:

.classes('font-mono')

[HackYardo]

Thank you everyone for nice help. I compared the default ui.textarea and ui.code(ui.markdown actually).

ui	.textarea	.code
same char width	by .style	True
height adjustable	True	by a slider
column wrap	Not Need	True
red wave valid	Not Need	True
color	False	True

So I chose ui.code instead. And to simplify, I used a inverted stack, the new line is the always first line:

from nicegui import binding, ui

AUTO_COMPLETE = "hi = len('world')\nprint(hi)".split('\n')

class Console:
    MAX_LINES:int = 16
    lines:str = binding.BindableProperty()

    def __init__(self):
        self.lines = ""
    
    def _pop(self):
        if self.lines.count('\n') == self.MAX_LINES:
            self.lines = self.lines[:self.lines[:-1].rfind('\n')+1]

    def push(self, line):
        self._pop()
        self.lines = f"{line}\n" + self.lines

def echo(value):  # some external program to talk with
    return value

console = Console()
with ui.card().classes('w-50 h-50'):
    i = ui.input(autocomplete=AUTO_COMPLETE)
    with ui.scroll_area().classes('w-full h-96'):
        o = ui.code().classes('w-full h-full').bind_content(console, 'lines')
        i.on('keydown.enter', lambda: console.push(echo(i.value)))

ui.run(port=8888)