Background Color for Part of Text Area

Is it possible in a text area to have some part of the text be assigned its own back color? (For example black text on a yellow background)

I am trying to “highlight” text in various colors within a text area. I can color parts of the text itself using StyledText, but that is not as conspicuous or as showing those areas with a background color.

There may exist some declares, but I don’t recall seeing any.

If you need to edit the text, I see no easy way to do that. Maybe Formatted Text Control from can do it.

If you do not need to edit the text, it would be pretty easy to do in HTML shown through an HTMLViewer. Alternatively, a ListBox can be used with the CellTextPaint even, but it is a lot more involved.

Mac? Win? Linux?
Desktop? Web?

or iOS?

for Mac OS X with MBS Plugin:

[code] dim rng as new NSRangeMBS( 1,2 )
dim ts as NSTextStorageMBS = me.NSTextViewMBS.textStorage

ts.addAttribute( ts.NSBackgroundColorAttributeName, NSColorMBS.redColor, rng )

This turns the characters in given range to red.

I freely admit this is a horrible kludge, but…

Lay a canvas over the top of the text field.
In the textfield textchanged event, add canvas1.invalidate

In the Canvas1 Paint event, add this code:

[code] g.TextFont = TextField1.TextFont
g.Textsize= TextField1.Textsize
dim startpos1 as integer
dim endpos1 as integer

if len (textfield1.Text) > 5 then //this only fires when we have enough letters
startpos1 = g.StringWidth (left(textfield1.text,3)) //start of the 4th letter
endpos1 = g.StringWidth (mid(textfield1.text,4,2)) width of 4+5
g.forecolor = &ce0e030 //yellowish
g.fillrect startpos1+3,3,endpos1+3,g.Textheight fill a rectangle leaving a gap at the top
g.forecolor = &c000000 //switch to black
g.drawstring mid(textfield1.text,4,2),4 + startpos1,g.Textheight +1 //redraw the hidden letters only
end if[/code]

This code will highlight the 4th and 5th letters in yellow.

The kludges are mostly in placing the text: I found there is a small space before the first letter in the text field, of about 4 pixels.
Almost certainly there are system calls that give you the actual displacements, but I dont know what they are

[quote=225662:@Jeff Tullin]I freely admit this is a horrible kludge, but…

I thought about that. It does work, although it is necessary to make the canvas parent nil otherwise it does not show.

It is indeed difficult to perfectly position the outline.

Make a feature request to add this to the Textedit control. As it is based on the TextInputCanvas it should be possible to add it.

Have a look at this. It makes it possible to add a background colour to selected text.

What do you mean ? Current TextFields are native controls AFAIK. Not based on TextInputCanvas. I have complained enough about the Windows TextField being flaky, and been answered that it was the way native Win32 controls behave…

That said, TextInputCanvas should indeed be able to support color background on a per character base.

My mistake.

In answer to Christian, it is in the Mac OS environment that I am trying to accomplish this.

       " ts.addAttribute( ts.NSBackgroundColorAttributeName, NSColorMBS.redColor, rng )

      This turns the characters in given range to red."

I assume that this means that it turns the BACKGROUND of the characters in the given range to red and that if I buy the correct MBS plugin, I could accomplish what I want? Basically, a TextArea which I can edit etc. and which allows me to turn on a “range” of text in that TextArea a specific Background color.

Note this is a Text Area that I have to scroll etc. that I am talking about and NOT a Text Field. This makes the kludge of overlying a Canvas "not very straightforward :slight_smile:

first you can try this with installing Cocoa plugins from us.
And yes, it’s for background.

This is a useful thought, and I might be able to make this work for my application although it will not be entirely straightforward.


MacOSLib has this as a TextArea extension so it’s just

myTextArea.FontBackgroundColor(1, 2, &cFF0000)

I think that’ll only work for 32bit, untested.

Here’s a self standing extension method, also 32bit but can easily be made for 64bit.

[code]Module TextAreaAddition

Sub setTextBGColor(extends ta As TextArea, start As integer, length As integer, bgColor As Color)
declare function NSClassFromString lib “Cocoa” (aClassName as CFStringRef) as Ptr
declare function docView lib “Cocoa” selector “documentView” (id As Ptr) as Ptr
declare function textStore lib “Cocoa” selector “textStorage” (id As Ptr) as Ptr
declare function colRGBA lib “Cocoa” selector “colorWithCalibratedRed:green:blue:alpha:” _
(cls As Ptr, r As single, g As single, b As single, a As single) as Ptr
declare sub addAttrib lib “Cocoa” selector “addAttribute:value:range:” _
(id As Ptr, name As CFStringRef, value As Ptr, aRange As NSRange32)
declare sub release lib “Cocoa” selector “release” (id As Ptr)

dim ts As Ptr = textStore(docView(Ptr(ta.Handle)))

dim range As NSRange32
range.location = start
range.length = length

dim col As Ptr = colRGBA(NSClassFromString("NSColor"), _
    bgColor.Red/255, bgColor.Green/255, bgColor.Blue/255, 1-bgColor.Alpha/255)

addAttrib(ts, "NSBackgroundColor", col, range)


End Sub

Private Structure NSRange32
location As UInt32
length As UInt32
End Structure

End Module[/code]

myTextArea.setTextBGColor(5, 6, &c00FF00)

(edited to release col)

I was just using Kem Tekinay’s RegExRX, and he has accomplished what I want in that application.

One way or another. :slight_smile:

Perhaps he is using a MSB plug-in? Perhaps MacOSLib?

He has what appear to be TextAreas that are editable and which show certain text highlighted by a colored background.

I appreciate Will Shank’s contribution. I am enough of an amateur that I had not heard of MacOSLib. Now that I have been informed about this resource, I will have to carve out some time/brain cells to understand how to use it. (for this or perhaps other things)

Click ‘Download Zip’ here to get MacOSLib:

Open it and copy the macoslib folder to your project.

Then copy over the Additional Modules folder (or just copy the TextAreaExtension Module that’s located in Additional Modules > Class Extensions)

Now you can type

myTextArea.FontBackgroundColor(5, 3) = &c00FF00

to turn the 6th to 8th letters backgrounds green

Well, if you go with MBS Plugins, you can ask me questions.
At least you can check the example projects there.

@Christian: do you have a function that does this cross-platform?

Currently not. But you can email me and I can check what I can do.
For Windows?