custom fonts and selection color

May 27, 2014 at 9:38 PM
Hi Arthur, upgrading to the latest version from my old hacked up version where I added custom font support myself back in April '13. Ho do you specify custom fonts, and how do you load them yourself if bundled with my application?

Also, how do you specify selection text color (fore and back color). Did you ever add that feature?

Thanks!
Ryan
May 27, 2014 at 10:13 PM
FYI for custom selection color this is what I added support for in style sheets (this simply gets added to the BaseStyleSheet):
        builder.Append("::-moz-selection { background: saddlebrown; }");
        builder.Append("::selection { background: saddlebrown; }");

::moz-selection and ::selection are "standards" already established by various browsers.

More info here:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

All I did was update the sylesheet code in the control so that it would honor these.

Hoping something like this has been added since I requested it back in April 2013. ;-)
Developer
May 28, 2014 at 8:10 AM
Both were added in v1.4.3.0 more than a year ago, shortly after you asked for it here: fonts that aren't installed on system.
Both exists in the demo app as can be seen in "Text" sample.

Custom fonts
privateFont = new PrivateFontCollection();
privateFont.AddFontFile(file);
foreach (var fontFamily in privateFont.Families)
    HtmlRender.AddFontFamily(fontFamily);
Selection
::selection {
    color: #bb5555;
    background-color: #aaddaa;
}
Marked as answer by ArthurTep on 5/29/2014 at 4:03 AM
May 28, 2014 at 11:38 AM
Awesome, thanks! I knew the font stuff was added, but wasn't sure how to access it. I'll give it a whirl later today!
May 28, 2014 at 2:32 PM
Edited May 28, 2014 at 2:34 PM
Unfortunately, it appears ::selection doesn't work when assigned into a BaseStyleSheet style. That or else I'm missing something or something else has changed since the days of 1.4.10. Your "Text" example has the style basked into the HTML. Mine does not. That could be the difference. Shouldn't ::selection style work as part of the BaseStyleSheet?

Here is formerly working code from my app which used to use my 1.4.10 custom build which enabled ::selection. In this case, NewsPanel is the HtmlPanel.
        // build and append the CSS to use
        string rgb = string.Format("rgb({0},{1},{2})", NewsCaptionLabel.ForeColor.R, NewsCaptionLabel.ForeColor.G, NewsCaptionLabel.ForeColor.B);
        builder.AppendLine("<style>");
        builder.AppendLine("::selection { color: #FFFF00; background-color: #3E3526; }");
        builder.AppendLine("p.large { margin-top:20px; }");
        builder.AppendLine("p.small { margin-top:10px; }");
        builder.AppendLine("p { margin-top:0px; }");
        builder.AppendLine("div.date { font-family:\"Apple Garamond\"; font-size:13px; color:").Append(rgb).Append("; }");
        builder.AppendLine("div.title { font-family:\"Moderne Fraktur\"; font-size:20px; color:").Append(rgb).Append("; }");
        builder.AppendLine("div.body { font-family:\"Times New Roman\"; font-size:13px; color:black; }");
        builder.AppendLine("</style>");

        // set the stylesheet
        NewsPanel.BaseStyleSheet = builder.ToString();
        builder.Length = 0;

The same exact code works with my custom build of 1.4.10. I get yellow on to of saddle brown when selected, not white on light blue.

I tried using color names (old code) as well as RGB hex values (new code) and this had no effect..

Is there something I have to do to get the control to "refresh" and use the new CSS?

The HTML I am inserting into the panel does not have any styles defined which would override this. In fact, the HTML inserted has zero styles whatsoever. That's why I'm using the BaseStyleSheet, so I can simplify the whole thing and ignore styles of the content I insert, and just define it once.

Any help would be most appreciated!

Thanks,
Ryan

P.S. For reference, I tried adding type="text/css" to the style, that didn't make a difference. That is the only difference I see from your "Text" example, vs. what I am doing in code, other than the use of BaseStyleSheet...
Developer
May 28, 2014 at 8:21 PM
No need for <style> element, just the CSS (remove the first and last "AppendLine" lines)
May 28, 2014 at 9:15 PM
That was indeed the issue, thanks! The old code would accept the <style> element, but the new code appears to get tripped up by it.

Now if I can just get ClearType to work, I'll be all set!