Генерация шаблона Python Flask: проблема с несовпадением первой строки ⇐ CSS

[Anonymous]

Я работаю над веб-приложением Python Flask, которое генерирует различные шаблоны на основе пользовательского ввода. Я специально пытаюсь создать узор звезды, но первый ряд постоянно смещается. Шаблон сгенерирован правильно, за исключением первой строки, которая выглядит с отступом или смещена вправо.
примечание: я впервые использую
код Flask(pythonWork.html):

Код: Выделить всё

My Python Work


Patterns:


Select a pattern type:

Star Pattern
Number Pattern
Triangle Pattern


Enter number of rows:


Generate




{% if pattern %}
{{ pattern }}
{% endif %}



[url=/]Back to Home[/url]

вот CSS-код:

Код: Выделить всё

.pyWork {
color: rgb(152, 151, 151);
padding: 20px;
border-radius: 10px;
width: auto;
height: fit-content;
}

pre {
background-color: #23232e;
color: white;
padding: 20px;
overflow: auto;
border-radius: 10px;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
font-family: monospace;
text-indent: 0;
}

.button1 {
width: auto;
color: white;
background-color: #4285f4;
border: none;
padding: 8px 16px;
margin-top: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}

.button1:hover {
background-color: #357ae8;
}

а вот код app.py:

Код: Выделить всё

@app.route('/PyWork')
def python_work():
return render_template('pythonWork.html')

@app.route('/generatePattern', methods=['POST'])
def generate_pattern():
pattern_type = request.form['pattern']
rows = int(request.form['rows'])
if pattern_type == 'star':
pattern = generateStar(rows)
elif pattern_type == 'number':
pattern = generateNumber(rows)
elif pattern_type == 'triangle':
pattern = generateTriangle(rows)
else:
pattern = "Invalid selection!"
return render_template('pythonWork.html', pattern=pattern)

# Pattern generation functions
def generateStar(n):
return '\n'.join('*' * i for i in range(1, n + 1))

def generateNumber(n):
return '\n'.join(' '.join(str(j) for j in range(1, i + 1)) for i in range(1, n + 1))

def generateTriangle(n):
return '\n'.join(' ' * (n - i) + '*' * (2 * i - 1) for i in range(1, n + 1))

if __name__ == '__main__':
app.run(debug=True)

ожидаемый результат:
*
**


Фактический результат:
как вы можете видеть, первая строка выровнена по правому краю.
Я попробовал следующие подходы для устранения несовпадения:CSS text-indent: я убедился, что свойство text-indent для элемента pre установлено в 0 в моей таблице стилей CSS.
Скрытые символы: я тщательно проверил сгенерированный шаблон для любые скрытые или непечатаемые символы, которые могут вызывать проблемы с выравниванием.
испорчена функция pre в css
Несмотря на эти усилия, первая строка остается смещенной.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ment-issue