1176Views94Replies

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




IblesFormatting

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

Discussions

0
None
kelseymh

10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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 ;)

0
None
kelseymh

10 years ago

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.

0
None
gumwrapper

10 years ago

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
nut&aposs
0
None
kelseymhgumwrapper

Reply 10 years ago

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.

0
None
gumwrapperkelseymh

Reply 10 years ago

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:
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).

0
None
NachoMahmagumwrapper

Reply 10 years ago

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

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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. ;)

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
kelseymhgumwrapper

Reply 10 years ago

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.

0
None
Kryptonite

10 years ago

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.

0
None
NachoMahmaKryptonite

Reply 10 years ago

. 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.

0
None
KryptoniteNachoMahma

Reply 10 years ago

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.

0
None
KryptoniteNachoMahma

Reply 10 years ago

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.

0
None
kelseymh

10 years ago

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).

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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.

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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.

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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

0
None
kelseymh

10 years ago

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
    [sic]
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?
0
None
NachoMahmakelseymh

Reply 10 years ago

. 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.

0
None
kelseymhNachoMahma

Reply 10 years ago

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/
0
None
NachoMahmakelseymh

Reply 10 years ago

. 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

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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.

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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. ;)

0
None
kelseymh

10 years ago

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/\.

0
None
NachoMahmakelseymh

Reply 10 years ago

. 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 ...

0
None
kelseymhNachoMahma

Reply 10 years ago

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...

0
None
NachoMahmakelseymh

Reply 10 years ago

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

0
None
kelseymhNachoMahma

Reply 10 years ago

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.

0
None
kelseymh

10 years ago

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.

0
None
The Jamalam

10 years ago


how do you do a monospace font?

0
None
=SMART=

11 years ago

test

TEST

~TEST~