Feature Request - Annotations ⓘ

[Fran_Vidicek]

I haven’t seen any other software that has this feature, so I assume it is too hard to implement and there is not enough demand for it because people are not even expecting to have this feature because it is never found in any doc or notes program.

However I can see this as a very useful feature that would be unique to Coda if implemented. A good selling point.

Here are some examples that I found on the internet to illustrate what I am exactly referring to:

Example 1

On Wikipedia, when there is a word or a phrase that has it’s own article about it, you can hover over the the word and a card with a short overview will pop out where you can quickly read about something or refresh your memory without leaving the page (amazing for user experience).

I could see something like this in coda where you add a link to a word and select it to be an annotation instead of “card” for example. I don’t know how you would select what text from that link to show…

Example 2

Yet another very similar example as the previous one. This one has different sections to it so that makes me think of Canvas. So maybe there could be an entire new canvas that pops up. Maybe limited canvas.

Example 3

This one is great from the visual standpoint, it basically works the same but it can be visually more appropriate. And it would be nice to be able to change the icon so that it fits the purpose and user’s expectations better.

[Paul_Danyliuk]

Yeah, this would be cool to have natively.

Meanwhile there are workarounds to be done:

How to create Tool-Tip Pop-Ups (ie show additional info upon mouse hover)

Hi everyone, @Paul_Danyliuk recently provided an interesting solution to the topic of Tool-Tip Pop-Ups, see the related Twitter post here: I had previously reviewed @Paul_Danyliuk’s related Community post (to be found here: Mega trick: Formatted tooltips for your table items (with JSON)) and found it inspiring. Based on this approach outlined by Paul, I have tried to replicate his process. As others might find this useful as well, I have compiled it into a step-by-step tutorial. Specifical…

Tedious but possible. I’m doing this in a few places in my “Hire Us” page:

[Fran_Vidicek]

Woah, you really find a way to do anything in coda!
That is a reasonable option.

Now I’m intrigued as to how you created that card in your screenshot. The one with a picture and colored text… Because as I understand; you can’t do that inside a code block. And this looks like a code block to me.

How did you do that?

[Thierryvm]

Hello @Fran_Vidicek

This kind of formatting is done in two steps and the second one is the use of the code block as a layer that is added on top.

Best regards,

Thierry

[Paul_Danyliuk]

Outside it’s a code block but inside it’s a formula that shows a value from a canvas cell elsewhere.

Stream for Patrons — 26 Sep 2022

Also

Mini tip: Outlined (code) blocks with regular font

Update: Do this with callouts now: Old answer for historic reason: I think I’ve seen this trick in @Scott_Collier-Weir’s docs — making nice outlined blocks for drawing extra attention. To draw such block, one would use Code Block paragraph style. The problem with it is that it forces all the text in the block to have monospace font (see left). [image] The solution: use formulas and put all the text there. The style of text in formulas will override the “outer” style forced by the block (se…

[Piet_Strydom]

Hi Fran,

There is also a quick way:

For many of my docs I create a Dictionary Table in which terms can be defined, and the definitions then be used wherever in the document the term is referenced.

Hovering over the Company Code reference elsewhere in the doc:

Regards
Piet

[Fran_Vidicek]

I can’t seem to find the 🛈 icon that you are using.
What character is that and is there a same one with a question mark.

Where do you get these icons from? I was searching trough websites like this one, but can’t find it.

[joost_mineur]

ⓘ or ⓘ → you can copy and paste one of these

[Fran_Vidicek]

That’s not bad, but I can’t comprehend how he has a symbol that doesn’t exist, he’s acting like he is a God among mortals, absolutely disgusting…

Do you maybe have one with a question mark? That would be cool.

[Paul_Danyliuk]

Oh, sorry for forgetting to answer this.

This here is simply an image. I took a monochrome icon from the library of icons (icons8) that Coda uses for buttons. You can get their URLs through developer tools:

Then I put it here in a canvas cell with an Image() formula and make it 15x15 so that it doesn’t appear very large:

Actually I lied. I didn’t just place it there. I downloaded it, uploaded to my doc, and then did some Edit Images Pack stuff on it to move it a bit to the bottom (i.e. align vertically with text) and also make it grayish:

Btw I did the same to recolor those other icons orange.

[Fran_Vidicek]

Beautiful, thank you!

[Fran_Vidicek]

How exactly do you aligh the icon with the text? Mine is a lot higher that yours,

however I used same parameters you did:

Are there more parameters I didn’t see?

The doc link

[Martin_Portevin]

I’ve found that when specifying image dimensions, coda messes up vertical alignement.
Not sure if it’s a bug or intended.

My solution is to use an image which already has the correct dimensions and use Image() without entering width and height.

Try this :

Not sure why, but using 15 for composition cuts the icon a bit, so I set it to 16. Still a better alignement.

You could also change “Icon edited” column to ‘Image Url’ format and remove .Image()

[Fran_Vidicek]

Now that I played around with it a bit and finally grasped the concepts of Composition and Layout, I realized that the icon cutting out is because the composition’s height is too narrow. The icon is too big for the composition.

So I just increased the composition height and moved the layer down a bit more.

Thanks for helping out

I just wish the icons kept the .svg format, instead of getting blurry.

[Martin_Portevin]

Not sure why, but using 15 for composition cuts the icon a bit, so I set it to 16. Still a better alignement.

Replying to myself, the icon was cut because I didn’t see there was an argument set for y position on the layer

[Martin_Portevin]

I made a copy of your doc. Not blurry here, but alignement is not perfect.

I think it would be possible to get better alignement using the Card()hidden formula and transparent images used as spacers. But I don’t think it is worth the trouble.

If you are interested, see this page inside @Jono_Bouwmeester beautiful doc : Can you keep a secret?.

[Fran_Vidicek]

When I view the doc on my 4K monitor the icons are blurry, but when I view them on Full HD Monitor, they are as sharp as they can be. Whatever, it’s fine.

[Martin_Portevin]

Makes sense, on 4K you’d have to double the resolution of the image and then force its displayed width and height via Image() which gets us back to square one and vertical alignement problems. I’d love to have more control on this too…