Font size is ignored by API

[Amerehei]

I want to clone our customize template to newly created workspaces like explained at Developing templates

The template consist of several elements, I decided to use gql-query-builder to support dynamic queries and make changing of templates with less troubles.

I programatically clone a template, after designing template in Bluescape workspace, I query all elements and hard code them in source code. then using gql-query-builder I convert hard coded template to queries and variables to create template elements in a single query

I had some issues, such as:

• When I fetch all elements, Bluescape returns float value for TextBlock.content.span.fontSize but only accepts integer for the same input
• Same issue for width and height of TextStyle and TextStyleInput

The above-mentioned bugs was easily fixed by rounding numbers.

The following bug dosen’t allow me to exactly clone the template. This query and variable is generated by gql-query-builder by iterating over hard coded template elements (And filtering them to a single element to simplify reporting bug and reproducing it) and converting them to create inputs. The font size of input is 53 but the actual font size displayed in the workspace is too small something like 10 , when I click on the text, Bluescape shows 40 as fontSize

I have same issue with size of Icons as well

Query

mutation($workspaceId: String!, $input0: CreateTextInput!) {
  createText0: createText(workspaceId: $workspaceId, input: $input0) {
    id
  }
}

Variable

{
    "workspaceId": "2DwKTVxUnEyvU0A3IvCm",
    "input0": {
        "blocks": [
            {
                "block": {
                    "align": "left",
                    "content": [
                        {
                            "span": {
                                "fontFamily": "Source Sans Pro",
                                "fontWeight": "bold",
                                "color": {
                                    "r": 255,
                                    "g": 255,
                                    "b": 255,
                                    "a": 1
                                },
                                "content": [
                                    {
                                        "text": "Artwork"
                                    }
                                ]
                            }
                        }
                    ]
                }
            }
        ],
        "pinned": true,
        "style": {
            "fontSize": 53,
            "fontFamily": "Noto Sans",
            "verticalAlign": "top",
            "color": {
                "r": 32,
                "g": 37,
                "b": 42,
                "a": 1
            },
            "backgroundColor": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 0
            },
            "width": 197,
            "height": 67
        },
        "surface": null,
        "traits": null,
        "transform": {
            "origin": {
                "anchor": "TopLeft"
            },
            "rotateZ": 0,
            "x": 3743.070343866959,
            "y": 9691.116578161646
        },
        "zIndex": 118
    }
}

[kkoechley]

Hi @Amerehei,

Thanks for the great feedback - I’m investigating and will get back to you shortly. I’m trying to reproduce and will need to see if this is a bug.

stay tuned!

/Kevin

[Amerehei]

@kkoechley Have you had any chance to reproduce it?

[kkoechley]

Hi @Amerehei,

Sorry for the delay - I was looking to get gql-query-builder running to verify this end-to-end.

I had some issues, such as:

• When I fetch all elements, Bluescape returns float value for TextBlock.content.span.fontSize but only accepts integer for the same input
• Same issue for width and height of TextStyle and TextStyleInput

The above-mentioned bugs was easily fixed by rounding numbers.

I have filed a bug with fontSize being returned as Float, but until this gets fixed I would suggest you keep using your workaround to round the output to avoid breaking the input for your mutation. Sorry for the inconvenience.

the font size of input is 53 but the actual font size displayed in the workspace is too small something like 10 , when I click on the text, Bluescape shows 40 as fontSize

This is actually correct due to the webClient is showing fontSize in font Point Size, and the APIs are using Pixel Size.

I agree this can be a bit confusing, but the math in converting pixel to pt is correct with: 53 px = 40 pt. If you need to translate them for reference you can use a tool like: Pt to Px Converter | Em to Px Converter | Px to Pt Converter

In your title, you mention FontSize is ignored. I’m not able to reproduce that problem, even when using the mutation you provided. Is this due to confusion with pt/px conversion or is there another problem where fontSize is ignored completely?

[Amerehei]

Let me show you what I expect and what I get. To have consistent screenshot, I use same zoom level.
In these screenshots we have an Icon and Text to show “Die lines” and a Shape with Whiteboard text inside of it.

This is a designed template by using the workspace of Bluescape frontend.

As I have explained before in another topic, I fetch all of these elements from GraphQL API and hardcode them and recreate them when I need to clone template.

All is well expect fontSize of Text and size of Icons

Here is what I get if I use GraphQL mutations to create them

You can see that the font size of Shape is ok but Text and Icon are too small

Inspecting Design

Inspecting Clone

As you said 53 px = 40 pt and my input query has input0.style.fontSize = 53 So there is no bug in the createText but I fetch this 53 by using this query (I have modified it to make it minimal)

query getTemplateElements($workspaceId: String!) {
  elements(workspaceId: $workspaceId) {
    elementType: __typename
    id
    zIndex
    ... on Text {
      surface {
        id
      }
      text
      textStyle: style {
        textTransform
        fontSize
        fontFamily
        verticalAlign
        color {
          r
          g
          b
          a
        }
        backgroundColor {
          r
          g
          b
          a
        }
        width
        height
      }

    }
  }
}

The value I have hardcoded for textStyle. fontSize from the returned object is 53

[Amerehei]

@kkoechley

I was looking to get gql-query-builder running to verify this end-to-end.

You don’t need to use gql-query-builder it only generates the query I have pasted in the first post, You can simply use that query.

[kkoechley]

Hi @Amerehei,

Thanks for the images of the designs you are trying to match.

In your example, you show that the text in the webUI for “Die Lines” is set to 112 pt:

This means the API would need to use pixels unit, not webUI’s point unit, which is: 112pt = 149px.

The value I have hardcoded for textStyle. fontSize from the returned object is 53

I’m still confused why you are using 53px (or 40pt) if the designs you uploaded shows 112pt (149px). Why wouldn’t you hard code the font as 149px?

My Steps to reproduce your issue:

1. I uploaded the image and recreated it in a workspace to make them match:
   

   

2. I then used your query (added query for both shape and icon width/height). Note the query response returns fontSize = 149px:

{
    "data": {
        "elements": [
            {
                "elementType": "Icon",
                "id": "651ed430c815ef39deae0604",
                "zIndex": 138,
                "width": 75,
                "height": 75
            },
            {
                "elementType": "Shape",
                "id": "651ed969c815ef39deae061e",
                "zIndex": -2,
                "style": {
                    "width": 2438,
                    "height": 431,
                    "fillColor": {
                        "r": 32,
                        "g": 37,
                        "b": 42,
                        "a": 1
                    }
                }
            },
            {
                "elementType": "Text",
                "id": "651ee530c815ef39deae064f",
                "zIndex": 150,
                "surface": null,
                "text": "Die lines",
                "textStyle": {
                    "textTransform": "none",
                    "fontSize": 149,
                    "fontFamily": "Source Sans Pro",
                    "verticalAlign": "top",
                    "color": {
                        "r": -1,
                        "g": -1,
                        "b": -1,
                        "a": -1
                    },
                    "backgroundColor": {
                        "r": 0,
                        "g": 0,
                        "b": 0,
                        "a": 0
                    },
                    "width": 569,
                    "height": 188
                }
            }
        ]
    }
}

[Amerehei]

@kkoechley I think I found the root cause of the problem and I hope I can let you to reproduce it

This is the element, We designed directly in the workspace without using any API

When I fetch element in graphql playground I have

This is the root of problem, I hard coded this response but the response contains invalid fontsize, so it’s why I try to create it with font size 53 (We have same problem for icon size)

I can easily bypass my problem by deleting this specific text and recreate it and then get elements. I have no idea of Bluescape internals

If you want to see a demo of the problem and how to reproduce it contact me directly as I cannot provide more information here

To have an idea of the problem see these screenshots

I have copied this buggy text (and icon) from my template to am empty workspace, I can copy and past it in the workspace but unfortunately I cannot past it here to let you reproduce it

The I created a text with content “Bug” with exactly same font size, color, weight , …

then I run this query in the playground

query getTemplateElements($workspaceId: String!) {
  elements(workspaceId: $workspaceId) {
    elementType: __typename
    id
    ... on Text {
      text
      textStyle: style {
        fontSize
      }

    }
  }
}

You can see this the buggy text has font size 53px and the other one has 149px but both of them have 112pt

{
  "data": {
    "elements": [
      {
        "elementType": "Shape",
        "id": "65207dfeac0fee0018a6a7ac"
      },
      {
        "elementType": "Text",
        "id": "65207dfeac0fee0018a6a7ad",
        "text": "Die lines",
        "textStyle": {
          "fontSize": 53
        }
      },
      {
        "elementType": "Icon",
        "id": "65207dfeac0fee0018a6a7ae"
      },
      {
        "elementType": "Text",
        "id": "65207e3a71c9b33a64387929",
        "text": "Bug",
        "textStyle": {
          "fontSize": 149
        }
      }
    ]
  }
}

[kkoechley]

Hi @Amerehei,

I think you were running into fontSize not being updated when text is scaled - you need to look at the scaleX and scaleY from the query, and then use the scale as input when creating a new text element.

I wrote a new community article that should answer the questions you might have:

How to work with fonts using our APIs: known issues and clarifications

Bluescape has a few inconsistencies with text fontSize that require clarification to help developers understand how Bluescape deals with fonts and fontSize. 1. Font Point and Pixel units In our UI the font size is displayed as font POINT size, and the API uses fontSize in Pixels. For example, when in the web client UI and selecting text, it shows 12 point. [image] However, when using an API to query the fontSize of the text element, it returns fontSize = 16 in pixels { "data": { …

Please let me know if you have any other questions.

[Amerehei]

Hi Kevin,

I trust you are doing great

Thanks for providing me the solution. It’s nice for me to learn more about Bluescape

Sincerely,
Asghar

TEST