I've been posting a few cartoons and such, where their text is actually googleable, and if you copy-and-paste them into a plain-text context such as Notepad, you'll magically get the actual text.

Like this:

Hello! [in word balloon]

Here's how to do that!

(1) Transcribe the text, or find it someplace in typed-out form (not an image). Sorry, no way around that. You need the actual text to put behind the scenes. Make sure there are no "straight double-quote marks" in it (I'll explain why, and how to work around this, in a bit).

(2) Insert your picture in the usual way. Set up your options (size, centering, etc.) the way you want them.

(3) Go into HTML mode. The editing toolbar looks a little different when starting a topic, when replying, or when leaving a comment; you'l see either "HTML Editor" or an "HTML" button in the upper right, like this:

Click it; the window will turn yellow and you'll see lots of markup gobbledygook. Don't panic! This is where we'll attach the text to the image.

(4) Find the <img ... /> tag for the image. It'll specify a filename, size, etc., and end with />. Here's what mine looked like for the "Hello!" above:

(5) Add the text inside the img tag, by adding alt="Hello! (or whatever your text is)" -- it can go just before the closing />.

(6) Exit HTML mode (click HTML again, or "Visual Mode"), continue writing and editing, and save your post. And voilà!

(Not to be confused with viola.)

What's the deal with double quotes?

Regular straight double quotes mark the beginning and end of the text in the HTML markup. If we tried something like

... alt="Chris said, "Hello!" Sandy waved." ...

the first double quote would end the ALT text (underlined here), and everything after would get interpreted as more markup; probably not what we're looking for!

What if I want double quotes in the text?

You can replace straight quotes "..." with curly quotes “...”. (Many word processors like Word have a "smart quotes" option that'll replace them as you type; and you can search-and-replace " with " which seems like it should do nothing, but will replace straight quotes with curly ones.) Curly quotes have no special meaning in HTML, and they look better anyway.

Or if you want actual typewriter-style straight quotation marks, use &quot; (with the semicolon). That'll get translated into a straight quotation mark after HTML parses what's your text and what isn't.

Views: 85

Replies to This Discussion

A few more notes:

Editing your image afterwards in the visual editor (changing size, centering, etc.) will discard your text. (It reinterprets the stuff inside the img tag, and doesn't save the "alt text".) That's why I usually add alt text last.

On Windows, Wordpad has "smart quotes" that you can turn on and off with Ctrl-Shift-" (ctrl-shift-quotation mark). Or you can type them directly with Alt-0147 (on the number pad) for “ and Alt-0148 for ”. Curly single quotes ‘ and ’ are Alt-0145 and Alt-0146. There's also a "Character Map" program that lets you pick out these and MANY other characters to copy and paste.

On Mac, it's apparently much easier, with smart quotes as Option combinations right on the keyboard, and you can change the layout. Also, it looks like you can turn "smart quotes" on or off systemwide, under System Preferences > Keyboard > Text. (Not a Mac user here; updates/corrections welcome!)

RSS

© 2019   Atheist Nexus. All rights reserved. Admin: The Nexus Group.   Powered by

Badges  |  Report an Issue  |  Terms of Service