toCSSFormat()
The toCSSFormat method returns a string in the css format with font settings.
To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create a div element, fill the element and place the css, svg and canvas strings in it using different font for each string:
// Create a div element
var divElem = PP.createElement(document.body);
// Set up styles for this element
divElem.style.cssText = "width: 200px; height: 100px; border: 1px solid rgb(102, 102, 102);";
// Determine white fill color
var backColor1 = new PP.SolidColorBrush({
Color: "#ffffff"
});
// Determine blue fill color
var backColor2 = new PP.SolidColorBrush({
Color: "#0000ff"
});
// Mix colors
var mixColor = backColor1.getMixColor(backColor2, 0.1);
// Set fill for a div element
divElem.style.backgroundColor = mixColor;
// Create a span element with the css text
var spanElem = PP.createElement(divElem, "", "span");
spanElem.appendChild(document.createTextNode("css"));
var spanFont = new PP.Font({
Color: "#0000ff", // Blue color
Size: 14,
IsBold: True // Bold font style
});
// Determine font settings for the span element
spanElem.style.cssText = spanFont.toCSSFormat();
// Create a SVG element with the svg text
var svgElem = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElem.setAttribute("width", "50");
svgElem.setAttribute("height", "30");
var textElem = document.createElementNS("http://www.w3.org/2000/svg", "text");
textElem.setAttribute("x", "10");
textElem.setAttribute("y", "15");
textElem.appendChild(document.createTextNode("svg"));
svgElem.appendChild(textElem);
divElem.appendChild(svgElem);
var svgFont = new PP.Font({
FontFamily: "Tahoma", // Font family
Size: 18,
Color: "#ff0000"
});
// Determine font settings for the svg element
svgFont.toSVGFormat(svgElem);
// Create a canvas element with the "canvas" text
var canvasElem = PP.createElement(divElem, "", "canvas");
var ctx = canvasElem.getContext("2d");
var canvasFont = new PP.Font({
FontFamily: "Arial",
Size: 20,
});
// Determine font settings for the canvas element
ctx.font = canvasFont.toCanvasFormat();
ctx.fillText("Canvas", 0, 20);
After executing the example a div element is created, which fill color is obtained by mixing white ad blue colors. This element contains the css, svg, canvas strings, each of them has its own font: