CSS Help to override HTMLViewer rendering

General
1

Working on a rudementary html web rendering page / program

I have searched the forum and documentation but I’m still at a loss on how to fix this.

TextArea1.text contains the html code
HtmlViewer1 contains the rendered html code

There are other web controls on the page, radio buttons, listboxes etc.

When this snippet of source code is in TextArea1, it changes ALL the default fonts on the page including the buttons, listboxes etc…

...
<style>
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
...

If I remove the two lines

font-family: Arial;
line-height: 1.1875;

then everything renders correctly.

Looking for suggestions for a way to keep all the default settings (or force my own set) on all the controls except the HTMLViewer which should render the source HTML code properly.

Thanks in advance,
Ben

2

What type of project is this?

If it’s Web, I could absolutely see this happening. It’s why most forum software (like this one) only allow markdown. Because typing html code can inject malicious code.

1 Like
3

Yes it’s a web project (but I could also create a desktop version and still might)

I was not aware that html injection even existed. I mostly deal with databases, very aware of it there.

I read up some on markdown / markup.
That’s easy, I’ll do that instead for a public version.

But on a private version i.e. for myself or a web developer, it’s not necessary to markdown / markup as only I have access to the html code and it’s stored in a db anyway.

So that leads me back to my original question, is there some way to set the parameters for just a specific control? - that would be truly helpful.

Thanks,
Ben

4

You need units on the this value. Otherwise it could be any size.

5

ok I think I’ve answered my own question. After re-reading several blog entries I came up with this…

On each control’s opening event I’m experimenting with css settings - seems to work - reference CSS font property

Var style As New WebStyle

// ------------------------------
// -- set major colors via xojo
// ------------------------------
style.BackgroundColor = &cFFFFFF
style.ForegroundColor= &c000000 

// ---------------------------
// -- switch to css syntax
// ---------------------------
style.Value("font-family")   = "Helvetica"  // -- depends on the browser
style.Value("font-style")    = "normal"     // -- normal, italic, oblique, inital, inherit
style.Value("font-size")     = "16px"       // -- in pixels
style.Value("font-weight")   = "normal"     // -- normal, bold, bolder, lighter, 100 thru 900 inc 100, initial, inherit
style.Value("line-height")   = "20px"       // -- number multiplied by font size, fixed in px, pt, cm, etc, % of font size, inherit
me.Style = style
6

Thank you Ian. I did realize I could change that value, but the source was generated by an html generator and it did not specify the unit. Once I finish the program it will make more sense.

7

Xojo also offers:

style.Bold
style.FontName
style.FontSize
style.Italic
style.Strikethrough
style.Underline

(note: checked the autocomplete, not tested)