Develop Reference

Creating custom SVG Icons in colour and generating the correct HTML with the required classes for the font file

Our company wants me to create a font package with our own custom icons for our Blazor application.
They don't want to reference individual image files as this will mean the browser will have to do multiple https request to fetch each individual file. We are using a menu sidebar with many sub-level items with icons.
Normally, when you create a Black and White SVG icon and generate a font package (lets say on https://icomoon.io/), it will just give you one span tag with one class because it is a black an white icon.
For example:
<span class="icon-BW-View-Customer"></span>
Below is the icon.
When I generate a font package for a colour image, it will create a parent span tag with sub-level span tags with sub-classes.
Now the issue I am trying to resolve is, when I dynamically create the menu items, I need to know if the icon is in colour and how many sub classes it has so that I can loop and add the sub CSS classes and span tags. Is there a way I can check the amount of CSS Query selectors somehow so that I can know how many times my code needs to loop to add these span tags dynamically?
Here is an example of the colour icon I just created for testing purposes with many paths and colours:
This is the CSS classes Icon moon will generate for colour icons:
The issue here is that I need to know how many paths the style.css file contains so that I can build the HTML markup dynamically. (Below this CSS, I have added an example of how they are nested).
.icon-Colour-Icon .path1:before {
content: "\e900";
color: #2e3192;
}
.icon-Colour-Icon .path2:before {
content: "\e901";
color: #be1e2d;
margin-left: -1em;
}
.icon-Colour-Icon .path3:before {
content: "\e902";
color: #00a14b;
margin-left: -1em;
}
.icon-Colour-Icon .path4:before {
content: "\e903";
color: #00a14b;
margin-left: -1em;
}
.icon-Colour-Icon .path5:before {
content: "\e904";
color: #8b5e3c;
margin-left: -1em;
}
.icon-Colour-Icon .path6:before {
content: "\e905";
color: #f9ed32;
margin-left: -1em;
}
Nested Span tags with different path classes:
<span class="icon-Colour-Icon">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
<span class="path6"></span>
</span>

I think your requirements are a little flawed as svg's will be cached after first load.
In answering your question.
Using svg's <use href="" ... :
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol class="bi bi-binoculars" viewBox="0 0 16 16" id="binoculars">
...
</symbol>
<symbol class="bi bi-caret-left" viewBox="0 0 16 16" id="caret-left">
...
</symbol>
</svg>
Razor Component
<svg class="bi" width=#Size height=#Size fill="currentColor" #attributes=#UncapturedAttributes >
<use href="_content/ChatClient.Core/images/bootstrap-icons/application-bootstrap-icons.svg#binoculars" ></use>
</svg>
#code {
[Parameter]
public int Size { get; set; } = 24;
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> UncapturedAttributes { get; set; } = default!;
}
I use this technique in this wasm pwa hosted on github pages. It creates a subset of twitters bootstrap icons.
I pass there existing svg using:
using var reader = new StreamReader(content);
XDocument document = XDocument.Load(reader);
XElement svgElement = document.Root!;
foreach (var element in svgElement.Elements().ToList())
{
...
}

Setting #Font-Face From C# Code Behind

In my stylesheet I have this declared
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
Now in my C# code behind I try to set the class like this
row.CssClass = light;
But I get a compile error of
The name 'light' does not exist in the current context
Is it possible to reference a css class #font-face from C# codebehind?
EDIT
This is how I am attempting to use this - I have tried the below
.lightfontface {
font-family: 'light';
}
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
row.CssClass = lightfontface;

I believe your
row.CssClass = light;
needs to be
row.CssClass = "className";
and your css will need a .className entry.
Imagine your html row:
<tr class="className">stuff</tr>
Your CssClass assignment is assigning the value to class, and your css can use a class selector to format that row.
To sum up some of the comments, the style sheet entry should simply be:
.className { font-family: 'light'; }
Ordering on your style sheet is important. Put the font-face definition above the .className style entry. See: https://www.w3.org/TR/CSS2/cascade.html#cascading-order

MVC html Custom helper for a status inidicator

I am trying to create a server status icon on the top of my application. When it is off appear as red, and on the other hand when it is on appear as green.
I have done all the dirty job in my DAL, BL, Controller and ViewModel and as a result i have a div element on my page which change colors subjected on the service status. My problem is that i cannot add a label next to the div.
public static class ServerStatusIconHelper
{
public static MvcHtmlString ServerStatusIconHelper(this HtmlHelper htmlHelper, bool isServerActive)
{
// Main container
var div = new TagBuilder("div");
bool isActive = isServerActive;
var labelValue = isActive ? "The server status is On" : "The server status is Off";
if (isActive)
{
div.Attributes.Add("id", "server-warning-on");
div.Attributes.Add("style", "background-color: green; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
}
else
{
div.Attributes.Add("id", "server-warning-off");
div.Attributes.Add("style", "background-color: red; height:25px; margin-bottom: 10px; border-radius: 25px; width: 25px; margin-left: 10px;");
}
return new MvcHtmlString(div.ToString());
}
}
I would appreciate some help since i dont know to add a div with a paragraph element which will provide the labelValue. In addition if anyone has any idea for something better would be nice.

When using TagBuilder you can set tag content using InnerHtml property or SetInnerText method:
InnerHtml: Gets or sets the inner HTML value for the element.
SetInnerText: Sets the InnerHtml property of the element to an HTML-encoded version of the specified string.
Here is an example:
var div = new TagBuilder("div");
div.AddCssClass("someClass");
div.MergeAttribute("id", "someId");
div.InnerHtml = "Some Text or Html Tag";
var result= div.ToString();
Which generates this output:
<div class="someClass" id="someId">Some Text or Html Tag</div>

You can combine label and div tags this way.
Also, you need to add display: inline-block; to your style to display label next to div.

You can use InnerHtml property of the tag.
var labelValue = isActive ? "The server status is On" : "The server status is Off";
div.InnerHtml = labelValue;
or if you want to concatenate a span element with div, you can do
var span = new TagBuilder("span");
span.InnerHtml = labelValue;
and return as
return new MvcHtmlString(div.ToString() + span.ToString());

How can I get text in an HTML tr (table row) to center?

I'm building some HTML in a StringBuilder like so:
builder.Append("<tr align='center' valign='top' class=\"skyBlueBackground textAlignCenter\">");
List<String> columnHeadings = GetColumnHeadings(monthCount, _begindate);
foreach (String s in columnHeadings)
{
if (s.Equals("Grand Total"))
{
builder.Append("<td align='left' valign='top' class=\"forestGreenBackground whiteText\"><b>");
}
else
{
builder.Append("<td align='left' valign='top'><b>");
}
builder.Append(s);
builder.Append("</b></td>");
}
builder.Append("</tr>");
Although I've got a class for centering text:
builder.Append("</style>");
. . .
builder.Append(".textAlignCenter { text-align: center; }");
builder.Append("</style>");
...the text is aligned left; it works other than that (skyblue background), it just stays magnetized to the left:
What must I do to get the text to center?

You should either set the textAlignCenter on the TD, not the TR or change the CSS definition to:
builder.Append(".textAlignCenter td { text-align: center; }");
And you should remove the explicit "align='left'" from your TD because that will still overrule the CSS.

If you are asking for how to vertically align the text, you could use the vertical-align CSS property. See here for more info.
You could also use the valign attribute, but it is deprecated in HTML5 and it is not a recommended approach.

Your problem is simply, you have created correctly the css class property .textAlignCenter, but your attribute align="left" on the <td> has style priority.
I think you can do two solutions:
Put the class .textAlignCenter on the td you want to align
center.
Remove the align="center" of the td and add a css like
this:
tr td {text-align:left}
tr td.textAlignCenter {text-align:center}
With this last solution you overwrite the last style.

HTML Renderer for WPF not rendering correctly

I'm using "HTML Renderer for WPF" from NuGet. I'm finding the output to be inadequate, and the discussion boards seem quiet and unmonitored so I thought it better to post here.
I have an HtmlPanel quite trivially in my xaml as
<htmlrenderer:HtmlPanel Grid.Row="2"
Text="{Binding ReportContent}"/>
where
xmlns:htmlrenderer="clr-namespace:TheArtOfDev.HtmlRenderer.WPF;assembly=HtmlRenderer.WPF"
I'm feeding it some simple HTML;
<!DOCTYPE html>
<html><head><title>dummy</title></head>
<body>
<style>
table {
border-spacing: 5px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 2px;
}
th {
text-align: left;
}
</style>
<h1>Report for <b>Processing dev</b> generated 16/11/2015 16:02</h1>
<hr/>
<h2>Group <i>Everyone</i></h2>
<table><caption>
<h3><b>Stage 1</b>
Run; Mass start</h3></caption><tr><th>pos</th><th>num</th><th>Name</th><th>Time</th></tr>
<tr><td>1</td><td>1</td><td>Person 1</td><td>00:41:00.0</td></tr>
<tr><td>2</td><td>2</td><td>Person 2</td><td>00:47:23.0</td></tr>
<tr><td>3</td><td>3</td><td>Person 3</td><td>00:47:24.0</td></tr>
<tr><td>4</td><td>4</td><td>Person 4</td><td>00:47:24.1</td></tr>
<tr><td>5</td><td>5</td><td>Person 5</td><td>00:52:00.0</td></tr>
<tr><td>6</td><td>6</td><td>Person 6</td><td>00:54:21.0</td></tr>
<tr><td>7</td><td>7</td><td>Person 7</td><td>00:54:32.0</td></tr>
<tr><td>8</td><td>8</td><td>Person 8</td><td>00:55:04.0</td></tr>
<tr><td>9</td><td>9</td><td>Person 9</td><td>00:56:23.0</td></tr>
<tr><td>10</td><td>10</td><td>Person 10</td><td>01:03:00.0</td></tr>
</table>
<table><caption>
<h3>Overall Results</h3>
</caption><tr><th>pos</th><th>num</th><th>Name</th><th>Time</th></tr>
<tr><td>1</td><td>1</td><td>Person 1</td><td>00:41:00.0</td></tr>
<tr><td>2</td><td>2</td><td>Person 2</td><td>00:47:23.0</td></tr>
<tr><td>3</td><td>3</td><td>Person 3</td><td>00:47:24.0</td></tr>
<tr><td>4</td><td>4</td><td>Person 4</td><td>00:47:24.1</td></tr>
<tr><td>5</td><td>5</td><td>Person 5</td><td>00:52:00.0</td></tr>
<tr><td>6</td><td>6</td><td>Person 6</td><td>00:54:21.0</td></tr>
<tr><td>7</td><td>7</td><td>Person 7</td><td>00:54:32.0</td></tr>
<tr><td>8</td><td>8</td><td>Person 8</td><td>00:55:04.0</td></tr>
<tr><td>9</td><td>9</td><td>Person 9</td><td>00:56:23.0</td></tr>
<tr><td>10</td><td>10</td><td>Person 10</td><td>01:03:00.0</td></tr>
</table>
</body></html>
My app renders this as follows. Note the absence of captions on the tables, the garbage upper left (which only appears when I have captions), and the lack of italic text ("Everyone" should be in italics). Loading this into Chrome renders correctly. I've checked it on validator.w3.org and the only error is the lack of a new "scoped" keyword in the style which isn't generally supported yet anyway.
Does anyone else have experience of this library? Given it doesn't seem to be functioning correctly in such a simple case, and seems like it may be dormant, is it worth persisting with? Is there a simple alternative that can just take a block of HTML and render it rather than what seems the over the top solution of CEFSharp, where various page providers have to be created and registered?

Try System.Windows.Controls.WebBrowser:
<Grid>
<WebBrowser x:Name="webBrowser1" Margin="0" Source="file:///C:/Users/Public/test01.html"/>
</Grid>
Or:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
webBrowser1.Source = new Uri("file:///C:/Users/Public/test01.html");
}