iink SDK on Device

How can I adjust the font on iOS?

I am having a hard time with setting up the desired font when using MyScript SDK. Most of the time a user is writing with Apple Pencil but sometimes I want to load text into editor and have this text styled like the rest of the app. 

IINKEditor has setTheme() function that accepts CSS but this doesn't work as I would expect it to work. 


1. Setting font-size is a nightmare. My default front size is 17 but when I apply that size to IINKEditor the text size is huge. Something around font-size: 5 is equal to UIFont.systemFont(ofSize: 17.0, weight: .regular).

2. I can't set up font-family. I want to use the default San Francisco font but this doesn't work. I tried with Verdana too but the end result is blank canvas.


Can somebody help me with this?


This was my initial idea:
let font = UIFont.systemFont(ofSize: 17.0, weight: .regular)

        try! editor.set(theme: """

.text {

font-size: \(font.pointSize);

font-weight: 400;

font-family: \(font.familyName),

line-height: \(font.lineHeight)

}

""") 

        let font = UIFont.systemFont(ofSize: 17.0, weight: .regular)
        
        try! editor.set(theme: """
.text {
font-size: \(font.pointSize);
font-weight: 400;
font-family: \(font.familyName),
line-height: \(font.lineHeight)
}
""")
        

 


Hello Josip,


Thank you for your question.

Could you please tell us which Content part type you are using?


Best regards,


Gwenaëlle

Hi,


Sure, its's the "Text" one.


package.createPart(with: "Text")

Thanks,

Josip 

Hello Josip,


Thank you for your update.


You can use the setTheme to achieve what you want to do, but you must do it before setting your editor part.


For instance, with the GetStarted 3.0.2 iOS Example, with a text Content Part, by changing the

    var defaultpackageType: String= PackagePartType.text.getName() /* Options are : "Diagram", "Drawing", "Math", "Raw Content", "Text Document", "Text" */


you can add the following call to set the theme, replacing line 87:

                tryself.editor?.part=package.part(at: 0)


by 

                try self.editor?.set(theme: ".text { font-family: Courier New ; font-size : 17 } ")

                tryself.editor?.part=package.part(at: 0)


Regarding your second issue with blank canvas on convert with some specific fonts, this is like due to the fact that the font family is not available on your device, resulting in a nil font in the UIFont+Helper.swift , in fontFromStyle implementation. I think you may add a check in this method so that when style fontfamily in not present on the device, you can set another font family. For instance, when Verdana is not present, fallback on Courier New


  // fallback on another font Verdana when is not available

             if (font == nil && fontFamily == "Verdana") {                 font = UIFont(name: "Courier New", size: CGFloat(style.fontSize))             }


Best regards,


Gwenaëlle









Thanks 


In the docs I found out that MyScript CSS uses mm (millimetres) instead of pt (point) values. So I had to do the following equation in order to get the correct value.


 

 let fontSize = font.pointSize / (CGFloat(editor.renderer.dpiY) / 25.4)
            /// sans-serif triggers the default font
            try self.editor?.set(theme: ".text { font-family: sans-serif ; font-size : \(fontSize); line-height: 1.2 } ")

 Now I have problem with setting letter-spacing or kern. I don't see that this is supported by CSS attributes within MyScript SDK. Do you know if there is a way to set it up?

Hello,


Thank you for your update. As indicated in the styling reference: https://developer.myscript.com/docs/interactive-ink/3.0/reference/styling/, only a limited subset of CSS properties is supported.


The properties supported for text are listed in https://developer.myscript.com/docs/interactive-ink/3.0/reference/styling/#text

The font-kerning property is not supported, and there is currently no way to modify the letter spacing.


Best regards,


Gwenaëlle

Login or Signup to post a comment