B4A Library [B4X] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View

Be open minded.

This is a cross platform library with several features:

- Text drawing engine.
- Text layout engine.
- BBCode parser.
- Two custom views that connect everything:
BBCodeView - multiline, scrollable with support for embedded views.
BBLabel - lightweight label.
- NEW: BBScrollingLabel: https://www.b4x.com/android/forum/threads/b4x-bbscrollinglabel-rich-text-scrolling-label.114310/

The library and the code inside can be used for all kinds of things related to text. You can for example use it as an alternative to CSBuilder where you have more control over the text drawing.

I will explain the main use case of BBCodeView.
Our layout is usually made of boxes. The boxes positions and sizes can change, however no matter what, the content is split into boxes.

With BBCodeView, text is the king. The text layout engine builds the layout based on the text. This is similar to html code. However, unlike html where you need to run a monstrous engine (WebView) inside your app, here there is no additional engine. BBCodeView is made of a ScrollView with an ImageView and additional views that you can add.
This means that you don't need to anything special to interact with the internal views and you can add any view you like inside the text.

Lets start with a simple example:
1. Create a layout with BBCodeView.
2. Initialize a BCTextEngine object. This should be called after the BBCodeViews and BBLabels were added.

TextEngine.Initialize (Activity)
BBCodeView1.Text = $"Hello world!"$

You can use all kinds of BBCode tags to format the text and add non-text elements inside.

BBCodeView1.Text = $"[b]Hello[/b] [url]world![/url]"$

The supported tags are:

[b] - Bold.
[u] - Underline.
[Url] - Clickable link. The LinkClicked event is raised when the content is clicked. Examples:
[url]world![/url]
[url="https://www.b4x.com"]hello[/url]
[Plain] - prevents the internal text from being parsed.
[Color] - Changes the text color. Example:
[color=#ff00ff]Hello[/color]
[Img] - Adds an image. Can be local or remote. Examples:

[img dir="${File.DirInternal}" FileName="logo.png" width=50/] 'width and height are optional for local images. Omit the dir parameter for assets files.
[img url="https://...s/l/42/42649.jpg?1432374732" width=60 height=60/] 'width and height are required for remote images.
[Vertical] - Changes the vertical offset. Example:
[Vertical=30]aaa[/Vertical]
[TextSize] - Changes the text size. Example: [TextSize=25]asdasd[/TextSize]
[Alignment] - Changes the horizontal alignment. One of the following values: Left, Right or Center.
Example: [Alignment=Center]Title[/Alignment]
[View] - Adds a custom view. Example:
[View=Btn1/]

[Span] - Creates an unbreakable section. Supports the following keys: MinWidth and Alignment. You can use it to create columns (see the example).

[INDENT]- Indention level. Example:
[INDENT=2]
[LIST]
[*]- Creates an ordered or unordered list. See the attached examples.
[FontAwesome] and [MaterialIcons] - Inserts a FontAwesome or Material Icons icon. Example:
[FontAwesome=0xF034/]
Supports the following keys: Size (text size) and Vertical (vertical offset).
[E] - Adds a sequence of characters that will be treated as a single complex character. Useful for complex emojis such as flags. Example
[E=??/]
[Font] - Sets a custom font that was previously added to TextEngine.CustomFonts. See this post for more information: https://www.b4x.com/android/forum/threads/b4x-bctextengine-bbcodeview-text-engine-bbcode-parser-rich-text-view.106207/post-702304
[a] - Adds an anchor. Used with BBCodeView.ScrollToAnchor. See example: https://www.b4x.com/android/forum/threads/b4x-bctextengine-bbcodeview-text-engine-bbcode-parser-rich-text-view.106207/post-938548

View, Img, FontAwesome and MaterialIcons tags should end with /].
You can also use vertical as a key inside View and Img tags.

Adding views is done in two steps:
1. Create a view and add it to BBCodeView.Views map.
2. Add it with the View tag.

Dim btn As Button
btn.Initialize("btn")
btn.Text = "Click!"
btn.SetLayoutAnimated(0, 0, 0, 100dip, 40dip)
BBCodeView1.Views.Put("btn", btn)
BBCodeView1.Text = $"Lets add a button here [View=btn Vertical=10/]. Do you see it?"$

The cross platform b4xlib is attached. Note that it depends on jBitmapCreator v4.71+ which is available in B4J v7.50 and B4i v5.80.
B4A library: https://www.b4x.com/android/forum/attachments/bitmapcreator-zip.81067/ (copy to the internal folder).
It is recommended to use Java 9+ on B4J. You will get better results on high DPI screens.

(The example adds a CustomListView to the layout. This can cause an issue in B4A if the layout becomes scrollable.)



Updates

- v1.95 - New anchors feature: https://www.b4x.com/android/forum/t...code-parser-rich-text-view.106207/post-938548
- v1.93 - Fix issues with Arabic scripts.
- v1.92 - MinGapBetweenLines field is now public. It can be used to make the lines more dense.
- v1.91 - Fixes several issues with Arabic languages.
- v1.90 - Fixes an issue where auto detect url stops working after the view is resized.
- v1.89 - Adds support for Arabic. Make sure to set BBCodeView/BBLabel.RTL = True. This version requires B4A 11.0+, B4i 7.5+ or B4J 9.1+
- v1.88 - Fixes an issue with MaterialIcons tag.
- v1.87 - BBCodeView - Links are underlined automatically when the user moves the cursor or presses on the link. Note that it is only enabled when lazy loading is enabled.
Example was updated and it is now based on B4XPages. B4i - There is an important inline OBJC code in example that you should add to prevent unwanted URL clicks when the user scrolls the BBCodeView.
- v1.86 - Initial support for right to left languages: https://www.b4x.com/android/forum/t...code-parser-rich-text-view.106207/post-779309
- v1.84 - Fixes bugs related to handling of complex characters.
- v1.81 - Adds an option for asynchronous drawing. This is an advanced option. You can see an usage example in the Pleroma client.
- v1.80 - Fixes several bugs. Allows disabling word wrap in BBLabel.
- v1.77 - Fixes issue with bold fonts in iOS 13 and exposes BBCodeView_BaseResize, it s is needed in B4A when we want to resize BBCodeView.
- v1.76 - New VowelsCodePoints set. Usage example: https://www.b4x.com/android/forum/threads/b4x-bctextengine-unicode-problem.117893/post-737764
Fix for wrapping issue with indented lines.
- v1.75 - B4i only - fixes an issue where wrong colors can appear.
- v1.74 - Fixes an issue with non-breaking white space.
- v1.73 - Adds support for kerning - dynamic spacing between characters based on the specific characters. Example here: https://www.b4x.com/android/forum/t...code-parser-rich-text-view.106207/post-711296
Kerning is enabled by default. It has some overhead. In most cases it shouldn't be significant. You can disable kerning with TextEngine.KerningEnabled = False.
- v1.72 - BCTextRun.Text field was added back. Fixed issue where setting BBLabel.Text to an empty string didn't remove the text.
- v1.71 - New Font tag: https://www.b4x.com/android/forum/t...code-parser-rich-text-view.106207/post-702304
- v1.70 - Adds support for complex characters such as emojis. Most emojis can be added directly and the text engine will recognize the sequences automatically. In some cases such as with flags you should use the new 'E' tag to add the emoji. See the examples.
- v1.65 - Fixes an issue where the designer text color was ignored. The set text color is used as the default color.
New BBLabel.DisableResizeEvent field. This is used by BCToast library which removes the internal ImageView from BBLabel after it is drawn.

- v1.64 - New property: WordBoundariesThatCanConnectToPrevWord - sets the split characters that will be connected to the previous word. Default value is ".,:".
- BBCodeDesigner v1.00 - B4J utility that helps with writing and testing BBCode strings:

1.63 - Views tags support the width and height properties.
1.62 - Adds support for Justify alignment.
1.61 - New BBCodeView.ExternalRuns property. This allows setting the styled text directly. Usage example: https://www.b4x.com/android/forum/threads/b4x-bctextengine-parser-b4x-code-highlighter.109308/

1.60 - Important update. Adds support for "lazy loading". In this mode the text is only drawn when it becomes visible and is removed when it becomes invisible.
With this change it is possible to use BBCodeView to show text made of thousands of lines.
Lazy loading is enabled by default. It is set in the designer. Uncheck this option if you want to get a single bitmap with all the text.

1.58 - Removes the background BitmapCreator that is not used by BBCode parser.
1.57 - BCTextEngine.WordBoundaries is now a public variable. Its default value is: "&*+-/.<>=\' ,:{}" & TAB & CRLF & Chr(13)
You can modify it and change the list of characters that are treated as separators.
1.56 - The '(' character is no longer considered a separator character.
1.55 - Underline tag accepts Color and Thickness parameters:

- Named colors are supported. Same names as available with XUI.
1.52 - Fixes a bug with images in BBLabels.
1.51 - Changes the way the BBLabel ImageView is set to make it possible to measure it.
1.50 - Large update. New BBLabel custom view. This is the lightweight version of BBCodeView. It is not scrollable and doesn't handle events.
- TextEngine.Initialize expects the parent view. It then searches the views tree for BB views and sets the engine. It is no longer needed to set the TextEngine for each view.
- New MaterialIcons and FontAwesome tags.
- The text can be set with the designer.
The examples were updated.

1.06 - New Indent and List tags.

See the examples.

1.05 - New Span tag. The Span tag creates an unbreakable content. It supports the following keys: MinWidth and Alignment.
You can use it to create tables:

Width dimensions can be set with %x units. The percentage is relative to BBCodeView width.

1.03 - Fixes a drawing issue.
1.02 - New BBCodeView.Padding field. Can be used to change the padding. Default value is:

'left, top, right, bottom
If xui.IsB4J Then
   Padding.Initialize(5dip, 5dip, 20dip, 5dip) 'leaves space for the scroll bar.
Else
   Padding.Initialize(5dip, 5dip, 5dip, 5dip)
End If

1.01 - Fixes a compilation issue in release mode.
The Img.Dir parameter is not needed when loading files from the assets folder.

Another example with a bit more logic is available here: https://www.b4x.com/android/forum/t...rser-rich-text-view.106207/page-2#post-665369

BCTextEngine is an internal library.

 

[William Lancee]

Same problem with right bracket. No urgency.

 

[Erel]

I've removed ')' from WordBoundaries and made WordBoundaries a public variable:

1.57 - BCTextEngine.WordBoundaries is now a public variable. Its default value is: "&*+-/.<>=\' ,:{}" & TAB & CRLF & Chr(13)
You can modify it and change the list of characters that are treated as separators.

 

[William Lancee]

The Span tag doesn't work when the contents is zero or one blank.
The Vertical tag doesn't work when the contents are empty or blanks. Therefore need to insert empty lines.

$"
-----------------------------------
[Vertical=100] [/Vertical]
-----------------------------------









[Span MinWidth=5%x]  [/Span][View=btn Vertical=15/]Lets add a [Color=#ff0000][b]button:[/b][/color] and more text here...



Lets add another [Color=#ff0000][b]button:[/b][/color] and more text here...
[Span MinWidth=10%x]  [/Span][View=btn2 Vertical=0/]
-----------------------------------
"$

 

[Erel]

Most tags affect their content. If the content is empty they will not do anything. Spaces are not drawn so they are not affected by these properties.

A bit hacky workaround is to add content with the same color as the background:

[Vertical=100][color=white]X[/color][/Vertical]
[Span MinWidth=10%x][color=white]X[/color][/Span]

 

[William Lancee]

Thanks. I was going to ask if there was a non-printable character, but same color as background is ok.

 

[William Lancee]

Can I get the background color?

Sub vSpace (Height As Int) As String
    Return $"[Vertical=${Height}][Color=${BBCVCol}]X[/Color][/Vertical]"$
End Sub

Sub hSpace (Width As Int) As String
    Return $"[Span MinWidth=${Width}][Color=${BBCVCol}]X[/Color][/Span]"$
End Sub

Sub BBCVCol As String
    'Dim col As String = $"#${Bit.ToHexString(???).substring(2)}"$            ??? background color B4A, B4J
    Dim col As String = $"#${Bit.ToHexString(xui.Color_White).substring(2)}"$
    Return col
End Sub

 

[Erel]

You can get it with BBCodeView1.mBase.Color. The color is set with the designer. Note that it must be non-transparent for this to work.

 

[Erel]

Don't use Bit.ToHexString. Use ByteConverter with this code: https://www.b4x.com/android/forum/threads/string-format-in-b4a.57697/#post-363272

 

[William Lancee]

Right, my formula was wrong. It works now, but as you said, I did have to set the background color in the designer.

BTW, I am always amazed at the efficiency and clarity of Smart Strings.​

Sub BBCVCol As String
    Dim bc As ByteConverter
    Dim bytes() As Byte = bc.IntsToBytes(Array As Int(BBCV.mBase.Color))
    Return "#" & bc.HexFromBytes(bytes).SubString(2)
End Sub

 

[Erel]

v1.58 - Removes the background BitmapCreator that is not used by BBCode parser.

 

[Erel]

1.60 - Important update. Adds support for "lazy loading". In this mode the text is only drawn when it becomes visible and is removed when it becomes invisible.
With this change it is possible to use BBCodeView to show text made of thousands of lines.
Lazy loading is enabled by default. It is set in the designer. Uncheck this option if you want to get a single bitmap with all the text.

Without lazy loading a single bitmap is created with all the text. This can work with text made of several tenths of lines.

 

[Erel]

1.61 - New BBCodeView.ExternalRuns property. This allows setting the styled text directly. Usage example: https://www.b4x.com/android/forum/threads/b4x-bctextengine-parser-b4x-code-highlighter.109308/

 

[Erel]

1.62 - Adds support for Justify alignment.

BBCodeView1.Padding.Right = BBCodeView1.Padding.Right + 5dip
BBCodeView1.Text = $"
[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]

[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]

[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]
"$

 

[js486dog]

1.62 - Adds support for Justify alignment.

BBCodeView1.Padding.Right = BBCodeView1.Padding.Right + 5dip
BBCodeView1.Text = $"
[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]

[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]

[Alignment=justify]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet augue sit amet purus laoreet varius. Quisque quis odio accumsan, cursus diam ac, accumsan nibh. Phasellus placerat enim quis dolor imperdiet, eu ullamcorper sem interdum. Sed in massa lorem. Aliquam auctor auctor lacus, et fringilla nisi cursus volutpat. Etiam egestas pharetra erat, in elementum est suscipit id. Aenean sed lectus risus. [/alignment]
"$

Erel Please is it possible to do somethink like this ?

Dim txtsize As Int
Dim alig As String

txtsize = 16
alig = "justify"

$" [TextSize=txtsize]
$" [Alignment=alig]
...
$" [TextSize] = txtsize
$" [TextSize] = alig

OR

there have to be:

$" [TextSize=22]
$" [Alignment=justify]

 

[Erel]

Please use [code]code here...[/code] tags when posting code.

$"[TextSize=${txtsize}]absdkasjdlkajsd lkasd [/TextSize]"$

https://www.b4x.com/android/forum/threads/50135/#content

 

[js486dog]

Please use [code]code here...[/code] tags when posting code.

$"[TextSize=${txtsize}]absdkasjdlkajsd lkasd [/TextSize]"$

https://www.b4x.com/android/forum/threads/50135/#content

Thank you very much Erel.
Works fine.

Sub Globals
    Private MyView As BBCodeView
    Private TextEngine As BCTextEngine
    
    Private MyText As String
    Dim txtsize As Int
    Dim alig As String
End Sub


Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout1")
TextEngine.Initialize(Activity)
    
MyText = File.ReadString(File.DirAssets, "from.txt")
txtsize = 16
alig = "justify"
    
MyView.Text = $" [Alignment=${alig}][TextSize=${txtsize}] "$ & MyText & $" [/TextSize][/alignment] "$
End Sub

 

[Erel]

Please:

MyView.Text = $" [Alignment=${alig}][TextSize=${txtsize}]${MyText}[/TextSize][/alignment] "$

 

[Erel]

BBCodeDesigner v1.00 - B4J utility that helps with writing and testing BBCode strings:

1.63 - Views tags support the width and height properties.

 

[Erel]

- v1.64 - New property: WordBoundariesThatCanConnectToPrevWord - sets the split characters that will be connected to the previous word. Default value is ".,:".

 

[William Lancee]

My set will be ".,:;?!-_')}]" & Chr(0x2026)