Balsamiq Community Discussion

Is it possible to make part of a word in a text bold?


#1

I’m designing a typeahead combo where I want to highlight the matching part in the dropdown list.
E.g. type ‘en’ will filter the results matching ‘en’ and show the ‘en’ part of each result in bold.
I use a list or text field where I enter

Alfred Alfredsen
Fien Fientjes

Unfortunately, this displays as I typed above, so with asterixes, instead of making the ‘en’ bold, like this:

Alfred Alfredsen
Fien Fientjes

[EDIT: Oops, it doesn’t work with the forum editor either]

Is it possible to make this work right, instead of having to create a several labels and glue them together?


#2

Hi @nielso,

You’re right, the text formatting needs words separated by white spaces to work properly, as detailed here.

I’ve reported your need to the team so we can think about this and see if there is a better way. If others would find this useful, please let us know by commenting or liking this post.

In the meantime, overlaying controls is probably the easiest workaround indeed.

Please let us know if you need anything else, we’re always here to help! :slight_smile:


#3

I just ran into what seems like a similar issue.

I was creating a block of text where it contains a headline and article text. I could do it with different elements, but I’m finding that in some text-heavy mockups, using the {size} and {color} tags inside of a text area is easier to manage.

But, I couldn’t bold the first word of the headline unless it had a space in front of it (because it was preceded by a {size} tag. It would be great if text markup could “simply” (I’m sure it’s not simple - lol) look for matching tags and format text as a user would assume it would (e.g. like Word).

Example where company name won’t bold:
{size:25}*Company name* news article headline{size}

Example where company name WILL bold (space before *):
{size:25} *Company name* news article headline{size}


#4

Hi @grebe,

Thanks for the post - I totally hear what you are saying in terms of easier management. I have a bit of a bad news good news situation. The bad news is that it’s unlikely we’ll get to fixing this in Mockups 3 as we’re in the process of a major, native rewrite of the desktop apps for macOS and Windows.

The good news is that your example works as you would like in the new desktop version of Balsamiq Wireframes (I tested it in the current macOS beta):

So, ultimately, this will be resolved. We’re in the early stages of a limited public beta - if you would like us to put you on the list for some testing, please drop an email to support@balsamiq.com and let us know if your a macOS or Windows user (or both).