Other [work in progress] BCText - Cross platform text engine

[Erel]

BCText is a custom and cross platform text engine. It can be used for all kinds of things such as cross platform implementation of CSBuilder, rich text view, specialized text layouts and other cases where you need full control over the text layout.

More information next week.

It is not 100% ready and especially it is missing another layer above the engine that will make it easier to build the text with the various options.

B4J code depends on the attached jBitmapCreator (v4.71).

 

[xulihang]

Looking forward to a rich text editor.

I have come across this error with b4j:

Compiling code.    Error
Error compiling program.
Error description: Unknown member: alphathresholdforcbcextraction
Error occurred on line: 363
CharBC.AlphaThresholdForCBCExtraction = 0
Word: alphathresholdforcbcextraction

 

[jimmyF]

Be sure to copy the new jBitmapCreator to your Internal Libraries folder; NOT the Additional Libraries.

 

[Erel]

Looking forward to a rich text editor

Note that writing an editor based on this will be quite difficult. A rich text viewer will be implemented.

 

[agraham]

I've just tried this but unfortunately the text is really 'fuzzy' on my system which is a Surface Studio with display scaling set to 200%. It also looks fuzzy on the screenshot above though on my system the contrast between the 'Click' text on the button and the other text is stark

It reminds me of the first Visual Studio versions that used WPF instead of WinForms for the editor and had fuzzy text and which eventually required the WPF team to rewrite WPF text handling to sharpen it up.

 

[Sandman]

I haven't tried this, and I understand it's a work in progress. But I also wanted to mention that the kerning seems very wrong in many places. (Which might be very difficult to get right if this solution is based on drawing bitmap characters on a canvas, or something to that effect.)

https://en.wikipedia.org/wiki/Kerning

 

[Erel]

1. Kerning is not implemented. Will probably be added in a future version.

2. About the fuzziness:
a. It is very sharp on mobile devices (where the scale is always more than 160dpi).
b. It should look as sharp as other text on most desktops which run with no text scaling.

It also looks fuzzy on the screenshot above

It looks better in reality. The animated gif is low quality.

I will try to improve it on High DPI desktops.

 

[Erel]

@agraham please try the attached example. Test it with Java 9+.

 

[agraham]

I now only use OpenJDK 11. That's a whole lot better, not perfect, but a lot lot better

 

[agraham]

It's a whole lot better at smaller text sizes than it was before, which was a bit grim Here's Bold 14 and normal 12 which is more like the sizes I would use. The only comment I would make is that the character spacing is a bit too wide. It's not so obvious with this fragment but seen as a whole they are just that little bit too far apart.

 

[agraham]

I've just found 'setSpaceBetweenCharacters'

 

[agraham]

'setSpaceBetweenCharacters' doesn't seem to affect the space character itself so if you set it to a larger value you can't see the spaces between words any more. Set it to 300dip/100 and I get a 'java.lang.ArrayIndexOutOfBoundsException: arraycopy: length -4 is negative' at 'bitmapcreator._drawrect2 (java line: 2569)'

 

[Erel]

Progress continues. The latest version is attached to the first post. It includes B4A, B4i and B4J projects.

 

[agraham]

It looks like you further improved the high dpi desktop rendering. It seems spot-on 100% acceptable now - and looks good on all five of my Androids too. Your screenshots above don't do justice to the perceived sharpness on real devices.

I see you fixed SpaceBetweenCharacters as well

 

[agraham]

Out of interest - what is the 'BC' in 'BCText'?

 

[DonManfred]

what is the 'BC' in 'BCText'?

BitmapCreator?

B4J code depends on the attached jBitmapCreator

 

[agraham]

I was hoping it might be something a bit more inspired than that

 

[DonManfred]

I was hoping it might be something a bit more inspired than that

Just to give you an Alternative:
Maybe it is part of Erels new Project: "Blind Coding" (do not put on the Monitor)

 

[Erel]

BC is indeed BitmapCreator.

When I started with it, the plan was to create a class that adds text drawing features to BitmapCreator. BitmapCreator can be used for all kinds of things, one of them is an alternative to Canvas / B4XCanvas. Text drawing is missing from BitmapCreator.
Eventually for various reasons I've decided to switch to a rich text engine. It is still based on BitmapCreator features.

BitmapCreator itself started as a class that creates 32-bit BMP images where the main use case was to create gradients and color pickers graphics. That's the reason for its a bit uninspired name.
Later it was rewritten several times with many improvements. Among other it is now the base of XUI2D games.

 

[Erel]

Many changes have been done. Beta version will be released tomorrow.

Code:

Dim btn As Button
btn.Initialize("btn")
btn.Text = "Click!"
btn.SetLayoutAnimated(0, 0, 0, 100dip, 40dip)
Dim pnl As B4XView = xui.CreatePanel("")
pnl.SetLayoutAnimated(0, 0, 0, 200dip, 120dip)
pnl.LoadLayout("CustomListView")
BBCodeView1.Views.Put("btn", btn)
BBCodeView1.Views.Put("clv", pnl)
For i = 1 To 50
   CustomListView1.AddTextItem($"Item ${i}"$, "")
Next
BBCodeView1.Text = _
$"[Alignment=Center][TextSize=20][b][u]This is the title[/u][/b][/TextSize][/Alignment]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum elit vitae nisi faucibus, vitae lacinia turpis mattis.
Lets add a [Color=#ff0000][b]button:[/b][/color] [View=btn Vertical=10/]  and more text here...
We can also add links, for example: [url]https://www.google.com[/url]. You can click on the link. The title will be updated.
Here is a nice logo: [img dir=${File.DirAssets} FileName="logo.png" width=50/]
Do you wonder whether it is possible to add more complex views?
Sure: [vertical=30][view=clv/][/vertical]
We can also download an image here: [url="DonManfred's avatar"][img url="https://b4x-4c17.kxcdn.com/android/forum/data/avatars/l/42/42649.jpg?1432374732" width=60 height=60/][/url]
Note that you must explicitly set the dimensions of such images.
"$