Author Options:

FAQ: How Do I Format Text? Answered

Now a full-fledged iBle! This topic is no longer being updated. Go here for latest version. 2009-01-22


This shows some of the formatting codes available on Instructables.
Please do not use the comments for testing. I suggest using your Orangeboard. TIA.

1. Font Styles

2. Headings

3. Paragraphs

4. Preformatted Text

5. Links

5.1. Escaping Links

6. Macros

7. Miscellaneous

7.1 Horizontal Rule (HR)

7.2 Bullets

8. Underlining

9. "Special" Characters


Very interesting issue with the "Heading" markup (equals signs).

In a Forum topic (as above), or in an I'ble, the Headings correspond to differently sized text (inconsistent with typical browsers, but still different). In individual comments, the use of Heading markup has been disabled (they're simply ignored).

However, if you use Heading markup and preview comment the text is rendered in the appropriate size, as shown above! It's only suppressed when you actually post.

. My guess is that's caused by a quick-fix for ppl abusing headings in comments - they forgot to fix the preview. . This formatting business just keeps getting curiouser and curiouser ;)

Hi, Nacho et al. FYI, the new server code no longer accepts Zach's curious workaround for square brackets. It now puts up a "red box" warning "link is invalid." The numeric entites are now the only way to put literal brackets into text.

I tried to add apostrophes to my slide show labels, but I couldn't get them to format properly. I tried the ampersand, pound, ascii number, and semicolon method but it just put in the work "apos" in there. I tried to just put three (3) curly brackets around the text - that did nothing. Any suggestions on how I can put apostrophes in my slide show captions?
It might work here'
or here

For simple apostrophes (next to the [return] key on U.S. keyboards), you just type them as normal text: Don't 'cha think we're goin' ahead? Maybe you mean something more complicated? If you could post a link to your slideshow (if it's unpublished, you can get the URL from your profile listing), maybe you could point out specifically what you're having trouble with.

It's just something in the caption field of my slideshow. I don't know if it applied to all slideshows or all captions. The problem occurs in my slideshow:
I also have a problem where I will save changes and publish them, but it takes some time before I can see the results (even in preview mode).

. Sounds like a problem with the slideshow gizmo. . I'd try using & apos; and & amp; (remove the spaces). Might work; might not.

Hi, Nacho. In fact, on the "Director's Chair" slide, he used a straight apostrophe and it got rendered as "'" :-/ I've recommended that 'gumwrapper' create a bug report.

. I'm thinking that with & #xx; the entity may somehow be getting translated twice. Start with & name; and it may get translated only once. Just a wild guess. One of those "try it and see what happens" things. ;)

I just confirmed the bug in slideshow captions: If you type a plain apostrophe character, it shows up in the caption as the string "'". Definitely a bug.

I see the problem on your slideshow (above). I'd recommend opening a bug report (go to the Bugs forum and create a new topic). This looks like a problem with the WikiFormatter engine used to render the captions.

Really nice forum post! Have you made it into an instructable yet? I don't believe you have, and if so it would be good for the new people on instructables. 5/5 Stars. Cheers.

. Still working on it. Other things have a higher priority. . Feel free to make your own iBle, using the info in this topic. PM me if you want any hints/tips/advice. Or I can make you (or someone else) a collaborator and they can finish up what I've started.

I'm currently making my First Instructable, and Already I've used a number of things from this, it's really useful, let's hope I get at least featured.

Sounds sweet, Christmas holidays are coming up soon, so I'll have loads of free time, looking forward to what ever comes up. Thanks for posting, -Kryptonite.

Hey, Nacho...does it make sense to convert this FAQ forum topic into an actual Instructable? Each of your main sections above naturally maps to a Step. It might also make it easier for new users to find. The Search interface doesn't seem to normally include forum topics (you have to go through some gyrations, which newbies are unlkely to know).

. I've started an iBle based on this FAQ, but The Powers That Be are real sticklers for illustrations in iBles and I just can't figure out a good way to illustrate this one. Since the formatting changes every now and then, I don't think screenshots will work very well. . If you can figure it out, I'd be more than happy to collaborate.

Unfortunately, I think screen shots (GIF or PNG) are your best bet. This whole issue revolves around visual formatting, not content-based markup, so the appearance to some particular user/browser/platform combination is about all you can present.

. Set up as it is, when the behavior of some of the Headings changed, I didn't have to change anything. The reader sees exactly how formatting will display. . If I were using screenshots, I would have to make new ones every time something changed. Changes to formatting don't happen often, but I'm really lazy.

You're right...ah, ha! Cheat! Take screenshots of, and use as the Step pictures, the input text. That doesn't change, then in the body of the Step, apply the formatting so that the presentation will change automatically, just as it does now.

You even use a simple "drawing" program with a large font setting (I'd use |xfig| with 28-point Helvetica bold) and save out GIFs or PNGs directly so you don't get burned by scaling issues.

. I like the way you think. ;) . And a screenshot would probably do well for displaying the extended chars in columns for section 9. (should be able to do that in a WP and make a screenshot) . Let me see what I can do. It will make a good break from pondering QM. heehee

Regarding item 5.1 and item 4 (second bullet), it is not at all clear how or when the "escape" character actually works.

One of my postings a short while ago included the notation
as part of the text. I tried to use the '!' escape character, so that the square brackets would be preserved. It didn't work as expected, rendering my comment with a pointlessly hyperlinked "[sic]" (also notice here that any character which precedes the square bracket gets moved to after the link!).

How is one supposed to identify metacharacters to be taken literally by the formatter?

. See section 9 that I just added. I'll add more chars as I find out what works. See this ASCII table if you want to experiment on your own. The # tells the system to interpret the following number as decimal. IIRC, if the # is omitted, the number is interpreted as hex.

. The only workaround I know of for the preceding-char-gets-moved-to-the-end problem is to put a space after the initial quote and a space before the terminal one.

Thanks! Your comment above isn't precisely correct.

The octothorpe (#) is required to identify the HTML entity (&...;) as a numeric code; otherwise it is assumed to be a registered name for a non-ASCII character (e.g., Latin-1 accented letters like ö == ö).

So, "&64;" (&64;) is nonsense, while "@" (@) is the at-character. Not all ASCII codes are valid in HTML, either. In particular, the "control characters" below 32 are not valid: you cannot backspace and expect to see the "space" letters overwritten (most browsers will render them as open boxes).

You may be thinking of the use of HTTP character codes (%xx) as part of URLs. In those expressions, the digits are hex, and are required to be so. My homepage may be referenced by either of
     http://www.slac.stanford.edu/~kelsey/     http://www.slac.stanford.edu/%7Fkelsey/

. Thanks for the correction/clarification.
. Very helpful links. I'll try to add some registered names, &c.
. At one time, I had the dec and hex values for the alphanum chars and most of the control chars memorized. But that was a loooonnnnggggg time ago. Think Apple //e and IBM 5150. ;)
. BTW, it appears that ASCII dec 9 <tab> only displays a space, but I need to do a little more playing around with it.
. Don't you have any easy questions? heehee

You wrote: >> . BTW, it appears that ASCII dec 9 only displays a space, but I need to do a little more playing around with it. That's correct. Whether a space or the "open box" I mentioned depends on your browser; either way, the numeric entity (&#09;) is forbidden in HTML, as are the other below-32 entities. Then you asked: >> . Don't you have any easy questions? heehee Of course not! I can answer the easy questions for myself (especially with the help of your excellent writeup, above). RTFM usually makes the easy questions self-answering.

. If you find out how to do columnar/tabular data, please let me know. The examples in my FAQ would look much better as a table (why I was playing around with ). I may be able to do it with pre-formatted text and spaces, but that just doesn't seem very elegant to me. . . It just dawned on me that there are several "translations" going on from the time one types something in to when it is displayed on a user's screen. Ibles' data entry, Ibles' page code generator, user's browser, &c.; It should be interesting to see what bugs, quirks, and undocumented features show up. . I have to type the list of chars into a text processor and C&P; edits. All the entities get converted by the system.

Your "WikiFormatting" link above includes some discussion of tabular data. I've tried both their simple and complicated ("reStructured Text") examples, but neither appears to be supported in the Instructable's backend.

I wonder whether the Instructables technical folks have actually rolled their own formatter, rather than adopting an existing backend system? That might explain the very limited amount of markup that is supported.

Thanks also for the comment on the "floating prefix" problem, and the workaround. I've reported this in the Bugs forum, but I have little hope of seeing a reply.

. Since there is a workaround, it would be low on my prioritized list. Certainly below someone's suggestion to have maillists for collaborators. heehee
. They usually respond quickly to the important stuff, but it does appear that most of them take nights and weekends off. ;)

Does the text-formatting engine support "active" hyperlinks (i.e., JavaScript or other actions more complex than a simple URL reference)? What I have in mind is a Step with multiple pictures. I'd like to make a hyperlink in my description which would change which picture is being displayed. This may be just too complicated for what it meant to be a simple "smart text" parser/\.

. Unfortunately, no. :( All you can embed is videos (but support is limited to Google video, Yahoo! video, Metacafe, Brightcove, Revver, Blip.tv, and YouTube!). . There used to be limited HTML support, but ppl abused it, so they had to disable it. Some of the Headings used to be much bigger, but ppl abused ...

Thank for the confirmation. I had followed your link to EdgeWall's documentation. With a little experimentation discovered that the various macros they document (enclosed in paired square brackets) don't work here, except for Timestamp (as you write above) and Video. Your note about HTML-abuse in postings makes a lot of sense to me. It's just too easy...

. If you discover any tricks, let me know and I'll add them above.

No trick, but another missing "feature." According to EdgeWall's documentation, backquotes should be the equivalent to `...` markup in HTML. That doesn't seem to be the case with your backend. The only "monospace" markup is preformatting, which blocks out the text.

Does Instructables have (or do you know where might exist) a standalone utility to convert HTML into the Wiki-encoding used for Instructables text? A quick Google search found me a CPAN module to do the trick, but unfortunately I'm using a loaner iBook with no admin privs for the next couple of weeks.

Most of my stuff is already in HTML format; deconvolving it into Instructables Steps is somewhat tedious, as you can imagine.

how do you do a monospace font?