B4J Question Faux bold and faux italic

[xulihang]

Setting the bold and italic of a font is effective only if the font supports bold and italic. Most Chinese fonts do not have italic glyphs.

I wonder if we can make the text bold/italic even if the font does not support it. This is called faux bold/italic in Photoshop.

 

[kimstudio]

Very interesting. Does Google "faux algorithm" give anything? My first thought would be image processing algorithms based on normal font image, like bold: dilation? italic: skew transformation?
To keep the quality of antialiasing, using big font size first then zoom out?

 

[stevel05]

It looks like PerspectiveTransform may be what you are after.

Try the attached, it's not perfect, but seems to be on the right lines. Not sure how it will work for all characters.

Have a play and see if you can improve it.

 

[kimstudio]

Try the attached, it's not perfect, but seems to be on the right lines. Not sure how it will work for all characters.

Italic works nicely! I think Bold should use image morphology processing method like dilation (use opencv to try).

 

[stevel05]

I think Bold should use image morphology processing method like dilation

This is way above my head. The transform just stretches the existing character. I haven't looked on Github to see if anything more advanced is available..

 

[Sandman]

For bold I would simply try redrawing one or two copies a pixel shifted to the right. It's not great, but perhaps it's good enough?

 

[stevel05]

Just had a thought, for Bold it may be good enough just to add a second label over the first one with the same text. you can sync the two texts using an invalidation listener. You could easily create a custom view to manage it.

Shifting the text 1 px, still makes it a little blurred.

Try the attached. Click on the form to change the text.

 

[kimstudio]

For bold I would simply try redrawing one or two copies a pixel shifted to the right. It's not great, but perhaps it's good enough?

Just recall this: draw text with outline https://www.b4x.com/android/forum/threads/draw-text-with-outline.141134/
Set the outline color as same as text may have bold effect.

 

[xulihang]

Thanks, guys. I am trying to make it work in TextFlow.

The problem I meet is that I cannot get the size of the text node.

In the screenshot, I just give it a size I guessed.

 

[xulihang]

I've updated the project to set the text item italic after the textflow is created and use snapshot to get the text's width and height. Let me know if there are better ways.

 

[stevel05]

Added a method to get the Text size without an image if it helps, and a test of bold using stroke and strokewidth. I'm not sure if it is legible on the Yahei font for small sizes.

 

[xulihang]

Added a method to get the Text size without an image if it helps, and a test of bold using stroke and strokewidth. I'm not sure if it is legible on the Yahei font for small sizes.

Thanks. This works great!

 

[TelKel81]

For Bold you can use DropShadow effect with max Spread and play with radius. You could achieve the same with CSS Styling (-fx-drop-shadow).
Ref : https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/effect/DropShadow.html

 

[xulihang]

If I set the line spacing property for text flow, the faux italic does not work properly.

tf.RunMethod("setLineSpacing",Array(5.0))

Before:

After:

 

[stevel05]

Try adjusting the height parameter in SetItalic to be Bounds.Height + LineSpacing

Public Sub SetItalic(index As Int, hAdj As Double) As TextFlow
    Dim item As JavaObject = texts.Get(index)
    Dim n As Node = item
    Dim TR As JavaObject
    TR.InitializeNewInstance("javafx.scene.effect.PerspectiveTransform",Null)
    Dim width As Double = n.PrefWidth
    Dim height As Double = n.PrefHeight
    
    Dim img As Image = n.Snapshot
    Log(n.PrefWidth)
    Log(n.PrefHeight)
    Log(img.Width)
    Log(img.Height)
    
    Dim Bounds As B4XRect = GetLayoutBounds(item)
    Log(Bounds.Width)
    Log(Bounds.Height)
        
    width = Bounds.Width
    height = Bounds.Height + hAdj
    
    TR.Runmethod("setUlx",Array(2.0))
    TR.Runmethod("setUly",Array(0.0))
    TR.Runmethod("setUrx",Array(width + 2))
    TR.Runmethod("setUry",Array(0.0))
    TR.Runmethod("setLrx",Array(width))
    TR.Runmethod("setLry",Array(height))
    TR.Runmethod("setLlx",Array(0.0))
    TR.Runmethod("setLly",Array(height))
    item.RunMethod("setEffect", Array(TR))
    Return Me
End Sub

Pass the line spacing value to hAdj.

 

[xulihang]

It works by extending the height with line spacing.

 

[xulihang]

I have a new problem.

If I set the text to bold as well as italic. It does not have a correct height.

It works okay when only faux bold or faux italic is set.

 

[stevel05]

Neither of the states can know if the other is set, I suggest you create a new sub to do both bold and italic at the same time and play with the parameters of the italic effect to compensate for the adjustments made for the bold setting. This is a fudge after all, you should be able to get it close though.