mirror of
https://github.com/open-webui/open-webui.git
synced 2026-05-07 03:18:23 -05:00
Svelte: Times New Roman Font Not Applying to Mathematical Expressions in OpenWebUI #2234
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/open-webui#2234
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @currytut on GitHub (Sep 28, 2024).
Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
@currytut commented on GitHub (Sep 28, 2024):
Problem Summary:
I'm customizing the OpenWebUI project, which uses Svelte for the frontend, and I want to display mathematical expressions (numbers, variables, and operators) in Times New Roman font. However, despite making changes to the CSS and Svelte components, the font is not applying correctly to the mathematical content.
What I've Tried:
CSS:
I’ve added a .math-content CSS class with font-family: 'Times New Roman', Times, serif; to ensure the font applies to all mathematical expressions. The class is intended to be used for numbers, variables, and operators in the LLM's responses.
Svelte Modifications:
In the relevant Svelte components (like MessageInput.svelte and Messages.svelte), I used JavaScript to wrap mathematical expressions in tags with the .math-content class using a regular expression.
The formattedMessage logic is applied using innerHTML, but the .math-content class is not being consistently applied to the expressions.
Font Installation:
I’ve ensured that Times New Roman is installed on my system and also added a Google Fonts fallback link, but the math expressions still don’t display in the correct font.
Goal:
My goal is for all mathematical expressions (numbers, variables like x, and operators such as +, -, *, /, ^) in the LLM's responses to be displayed in Times New Roman font. Currently, the font is not rendering properly for the math expressions, and I’m unsure why the .math-content class isn’t being applied as expected.
@currytut commented on GitHub (Sep 28, 2024):
Questions or Additional Context:
Why isn't the .math-content class applying to the mathematical expressions in the LLM's responses, despite adding it to the relevant CSS and Svelte components?
Could there be an issue with how Svelte renders the innerHTML when using dynamically generated content with tags?
Are there any known issues with CSS specificity or font inheritance that could be causing the Times New Roman font not to render as expected?
Could Docker or any other part of my setup (Kali Linux, OpenWebUI) be interfering with the proper application of CSS or font rendering?
What steps should I take to debug or inspect whether the CSS or Svelte logic is being overridden or misapplied?
@sp301415 commented on GitHub (Sep 29, 2024):
I'm afraid it will be quite difficult. Open-WebUI currently uses KaTeX to render math contents, and according to https://github.com/KaTeX/KaTeX/discussions/3716, changing fonts in KaTeX seems to be non-trivial.