JavaScript API 3.29 setting font family.

[TylerWaring]

Greetings,

 I'm working on a labeling tool that allows the user to set the font family, size, weight variant and style of label before adding it to the map as a graphic's text Symbol. I can set every one of those properties except for the font family. The font family for thegraphic is always set  to "'Helvetica Neue',Helvetica,Arial,sans-serif" no matter what value I put into the "font.setFamily()" method.

I have a couple of questions. First where is an authoritative list of fonts values that can be passed to the "font.setFamily()" method. Next, once you have those values, how do you get a graphic's text symbol to display those fonts?

I'm assigning the properties of my font like this:

let font = new Font();
font.setVariant(Font.VARIANT_NORMAL);
font.setWeight(Font["WEIGHT_BOLDER"]);
font.setFamily("impact");
font.setStyle(Font["STYLE_OBLIQUE"]);
font.setSize(20);
let textSymbol = new TextSymbol(notes, font, color);
let textJSON  = textSymbol.toJson();
let labelg = new Graphic(graphic.geometry, textSymbol, graphic.attributes);
console.log(labelg.symbol.toJson());
layer.add(labelg);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

When I check out the console.log of labelg.symbol.toJson() at this point I get :

{size: 15, style: "oblique", weight: "bolder", family: "impact"} . Except for the font size being 15 rather than 20, this is pretty much what I expect.

However, when the graphic loads, it is clearly not impact. Upon right clicking on the label in the map and selecting the 'Inspect' menu option to see the HTML of the label in the developer console I see the folowing:

<text fill="rgb(0, 0, 0)" fill-opacity="1" stroke="none" stroke-opacity="0" 
stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4"
x="196" y="394" text-anchor="middle" text-decoration="undefined" rotate="0"
kerning="auto" text-rendering="optimizeLegibility" font-style="oblique" 
font-variant="normal" font-weight="bolder" font-size="20" font-family="impact,Arial"
dominant-baseline="alphabetic"
transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)"
fill-rule="evenodd">
    <tspan dy="0" x="196" letter-spacing="1px" 
    font-family="'Helvetica Neue',Helvetica,Arial,sans-serif">
        Courier New, 20, B, I
    </tspan>
</text>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The 'font-family' property in the text element is set to 'impact,Arial', however it appears to me that the tspan element is the element that actually styles the font in the map. The tspan element's font-family is set to "'Helvetica Neue',Helvetica,Arial,sans-serif". If I change the tspan's font-family property to 'impact' in the developer console then the font family displays correctly in the map.

How do I get the tspan's font-family set correctly using the JavaScript API?

Thanks, Tyler

[shaylavi]

Hi Tyler,

In regards to the (new) Font class, is it something you wrote? I don't believe it's part of the API library.. it would be helpful to see its content.

Shay.

[TylerWaring]

Hi Shay,

I used the Font class in conjunction with the TextSymbol class from the API library as is done in this example. However, the TextSymbol displayed in the ESRI example does not carry the font styling in a tspan div. In the ESRI example the html for the text symbol looks like this:

<text fill="rgb(0, 0, 0)" fill-opacity="1" stroke="none" stroke-opacity="0" stroke-width="1" 
stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="315" y="184" 
text-anchor="middle" text-decoration="undefined" rotate="0" kerning="auto" 
text-rendering="optimizeLegibility" font-style="normal" font-variant="normal" 
font-weight="bolder" font-size="40" font-family="Impact,Arial" dominant-baseline="alphabetic" 
transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,0.00000000,0.00000000)" 
fill-rule="evenodd">X: -13,047,355.689, Y: 4,035,635.357</text>‍‍‍‍‍‍‍‍

I'm not sure why my implementation is carrying the font-family property in a tspan element.

Thanks, Tyler

[shaylavi]

Interesting.. I never noticed that class before. Anyway, I used the sample you mentioned with the "impact" font family and it seems to be working fine on my side.

I don't have a clear understanding on your environment to know why you have difficulties there but I can recommend 2 things -

1. break it down to small pieces - pure HTML with no frameworks or 3rd party tools seems to be working when using the setFamily function so it might be something to do with your environment.

2. override the css settings - It might not be the "cleanest" solution but if you can't get it to work "by-the-book", I think it's acceptable to override the css style with your own

.new-style { font-family: "impact" !important }

Sorry I couldn't answer your questions though

If you're looking to understand better (or modify) the Font class behaviour you can download the API and play with the code - but I definitely not recommend doing that.. It's better to just override the style with your own.

Good luck

Shay.