I use Wix Editor and have textboxes where I format the text via the Wix GUI and I have textboxes that I format (in velo) with .html (because I pass variables).
I have noticed that the text size in the text box that I format with .html differs from “standard” text boxes (without .html formatting) - although I use 16 px Helvetica in each case.
See image with 2 textboxes and the code for the example:
$w("#Text1").text = `This is a 16px Helvetica sample text for testing - Textbox with .text`;
$w("#Text2").html = `<span style="font-family: helvetica; font-size: 16px;">This is a 16px Helvetica sample text for testing - Textbox with .html</span>`;
Does Wix use a different Helvetica font in the .html statement?
How do I get the same font?
I would double-check to make sure that ALL of the properties of #Text1 are translated to #Text2. Check for font-weight, line-spacing, and letter-spacing in particular to make sure the html element matches what the editor says.
I have added the properties, but the different text output remains.
The text with .html remains a little larger:
$w("#Text1").text = `This is a Helvetica sample text for testing - Textbox with .text`;
$w("#Text2").html = `<div style="text-align: left;"><span style="font-family: helvetica; font-style: normal; font-weight: normal; font-size: 16px; line-height: 150%; letter-spacing: 0; color: #002E5D">This is a Helvetica sample text for testing - Textbox with .html</span></div>`;
I think the issue might be that your .html content is not wrapped in a text tag. In your case, it seems like both #Text1 and #Text2 should be Header 2 or <h2>. Go to your Site Theme and make sure that your Header 2 has all of those CSS properties (or click “Save to Theme” on the top right of the Edit Text panel). Then, you should be able to just do:
$w("#Text2").html = `<h2>This is a 16px Helvetica sample text for testing - Textbox with .html<h2>`;
and it should copy the styling from Header 2 over exactly. Let me know if this helps!
I have to get in touch again because I am now experiencing very strange behavior…
If I format a text element #TitleText with the following line and call up the live page, everything is displayed correctly. But when I reload the page, the text element is suddenly displayed in bold and some other text elements (not all) on the page (e.g. also in the footer) are also displayed in bold. If I comment out this one line, there are no problems.
I haven’t been able to replicate this issue. To clarify, are you using the backtick () or single quote (')? The correct notation to parse expressions like ${myTitle}` should be the backtick.
Since this is a separate issue, if this persists please create a new thread about this issue. Thanks!
