Forum Discussion

inserv's avatar
inserv
Regular Visitor
7 years ago
Solved

Custom visual development - issue rendering font "DIN"

Hi All. We have an issue with rendering DIN font in our custom visual. Issue: DIN font rendered by our custom visual do not match the same font (with same color, size...) by built-in card visual. ...
Need Help
  • v-evelk's avatar
    v-evelk
    7 years ago

    Hi,

     

    1. The latest API supports standard definition of Font list

    However it will add all the possible fonts for Power BI (including these that don't work in sandbox).

    However, font list may be defined manually as any enumeration in capabilities.json

    Unfortunately, I am unfamiliar with all non-working in sandbox fonts, only DIN, but there may be couple of others.

    Honestly, I don't recommend to define them manually because I have discussed this question with persons who is in charge of this question and there is a chance that these fonts may be supported in sandbox in the future.

    Also, visuals may work in different modes so, it is better to leave this fonts as is.

     

    2. Font size is defined in 'pt' (if it described correctly in capabilities.json)

    However, inside visual it may be transformed into 'px' by the code (if developer decided, but original size storing in 'pt' anyway)

     

    Kind Regards,

    Evgenii Elkin,
    Software Engineer
    Microsoft Power BI Custom Visuals
    [email protected]

dm-p's avatar
dm-p
Super User
7 years ago

Hi inserv,

Here's the code I used - I just took yours and added the styling in from inspecting the element in the browser as per my screenshot above, although I modified the font based on the value in the properties pane:

this.eleDinTest
    .text("Test DIN")
    .style("font-size", "27pt") // or .style("font-size", 20 + "px")
    .style("font-family", "wf_standard-font, helvetica, arial, sans-serif")
    .style("font-weight", "normal")
    .style("fill", "rgb(51, 51, 51)");

Two additional things that might help:

  • Note that normal for font-weight is a lower-case 'n'. Your example uses upper-case, which CSS will ignore.
  • If you're using 'pt' vs. 'px' when comparing, your CSS unit of measurement will have a difference. If you're using a visual property as reference, the core ones all use 'pt' now, so I'd suggest replacing your code to match that.

I'm hoping that should be it. If not, feel free to post your updated code and I'll take another look for you.

Cheers,

Daniel

inserv's avatar
inserv
Regular Visitor
7 years ago

Hi Daniel,
Thank you so much for quick response.
Sorry for delay in our response.

We tested with a new pbiviz project.The problem still persists.
Just to keep it simple, we changed code in constructor() as noted and removed code from update().

Still size rendered do not match PBI card visual.

***Code****
constructor(options: VisualConstructorOptions) {
this.target = options.element;
if (typeof document !== "undefined") {
const new_p: HTMLElement = document.createElement("p");
new_p.appendChild(document.createTextNode("Sales YTD"));
new_p.style.fontSize = "26px";
new_p.style.fontFamily = "wf_standard-font, helvetica, arial, sans-serif";
new_p.style.fill = "#000000";
new_p.style.fontWeight = "normal";
this.target.appendChild(new_p);
}
}
public update(options: VisualUpdateOptions) {

}

**********

As always, appreciate your help and time.
Thanks.

 

  • inserv's avatar
    inserv
    Regular Visitor
    7 years ago

    Hi Daniel,

       Thanks for all your help and time.

    We will try to upgrade our visual(s) to latest API version.

    We shall try your suggession till we upgrade.

    Thanks and Best regards.