Accent Marks and Special Characters

ACCENT MARKS AND SPECIAL CHARACTERS
• ONLINE DESIGN TOOL TIPS

On occasion you may find it necessary to enter text into your online design that uses one or more accented characters (such as the acute over the two "e" letters in "résumé"), or requires using certain special characters (such as the inverted question mark when asking "What?" in Spanish: "¿Qué?"). 
 
At present, the majority of the accented and special characters cannot be entered directly into the design tool.  If a character is not part of a particular font in the design tool, it will not appear if typed or pasted into the online design tool's text editor.  For example, when I attempt to paste ¿Qué? in the text editor in the design tool using the default Franklin font, the inverted question mark and the acute e are lost, so that the word appears as "Qu?".
 
Since 'Qu?' is not the result I'm looking for, this article will describe ways to get the desired text into the online design.

— Text As Graphic —

One method of adding text with accented or special characters to an online design that is – in a way – fairly easy to do is to use a graphics program on your computer (such as Microsoft Paint® in Windows®).  As this is being written on Halloween, I'll use the French version of a quote from the 1931 film Dracula:
 
«Écoutez-lez. Les enfants de la nuit. Écoutez leur musique.»
"Listen to them. Children of the night. What music they make."
 
Most of this text will be plain simple letters.  There are three specific special characters in this quote; the opening [«] and closing [»] French quotation marks, and the acute capital letter e [É].  Using Photoshop®, I've created a new image using these settings:
 
• Height = 6"
• Width = 84"
• Colors = RGB
• Background = Transparent
 
The large size of the image is intentional.  Creating a large image helps preserve its appearance if I have to enlarge it after importing it into the online design tool, as it should mean that I will only have to enlarge it slightly, if at all.
 
If I have to make the image smaller once it is in the online design tool, its appearance will be preserved as well.
 
In Photoshop® and other programs, one of the most common ways to enter accented and special characters is the Character Map (Windows) or the Character Viewer (Macintosh).  Another very common method is the use of keyboard shortcuts.  Written forms of such shortcuts can be thought of as a form of shorthand, such as:
 
In Windows, the capital letter E with the acute accent  =  ALT+0201 = É — Meaning press and hold one of the ALT keys and then press the number keys on the keypad 0, 2, 0, 1, then release the ALT key.  If you're working on a computer that does not have the set of number keys on the right side–that looks like a calculator keypad–you'll not be able to use keyboard shortcuts, and will have to use the Character Map.
 
On a Macintosh, the capital letter E with the acute accent = OPTION+E, E = É — Meaning press and hold the OPTION key and then press the E key, the comma means 'release both keys' and then press the letter E key again. 
 
For the three special characters in this example, the keyboard shortcuts are:
 
Special Character Windows Shortcut Mac Shortcut
É ALT+0201 OPTION+E, E
« ALT+0171 OPTION+\
» ALT+0187 SHIFT+OPTION+\
 
The exact font settings may require some experimentation, based on the font being used.  In this example, I've used the Cambria font in black, with a manually-entered point size of 225:
 
When saving the image, I'll be using the PNG format. The PNG format is one that works well with the online design tool, it also retains the transparent background.  Once the image has been saved, it may be imported into the online design tool.  The transparent background avoids the potential problem of having to change the background color several times.
 
Imported "Text as Graphic"
"Text as Graphic" Over a Background
Please Note that imported images, such as the graphics version of the line of text discussed here may not appear at their full resolution in the online tool, but will be used at their full resolution by Production.

— Design Tool Tricks —

Certain special characters already exist in the eSigns online design tool, and may be found by going to Clip Art, and then clicking Symbols & Icons in the By Subject list.
 
In the image at left I've scrolled though the list of images so that the "Registered" ® mark may be seen.  This mark is one of the special characters that cannot be entered directly into the online tool using a keyboard shortcut.
 
A brief list of characters that may be found in the clip art includes (without being limited to):
 
 
Dollar Sign - $ - outline Copyright Symbol - © - solid
Dollar Sign - $ - solid Registered Symbol - ® - solid
Cent Sign - ¢ - solid Venus (Female) - - solid
Cent Sign - ¢ - outline Mars (Male) - - solid
 
In demonstrating creating special characters in the online design tool I'll be using the Spanish version of the film quote from Dracula:  «Escúchelos. Son los hijos de la noche. Qué Hermosa música componen.»
 
When pasted into the text editor, the special characters are lost, as shown in the image below:
The red line visible under several of the words shows that the text editor's spell checker has flagged those words as being misspelt. 
 
When working with text for other languages the spell checker may flag a word as being incorrect when it isn't, as the spell checker is set to work with American English as its primary language.
 
So we recommend being extra careful to check foreign language text entered to make certain it is correct before placing your order.
 
After pasting the text, the next step is to enter the un-accented version of any letters that were lost during the copy-&-paste into the editor.  In the example text I've had to add the letters "u" and "e" into the words that lost their special characters, like so:
Now that the missing letters have been entered into the editor, I'm ready to add the text into the design by clicking the green Add Text button.  With the text in the design I recommend saving the work done so far to avoid any potential problems that could arise if the design tool is allowed to time out.  I recommend saving your work every  5-10 minutes.
 
For best results, I also recommend getting the text set into the design as close to what you have in mind for its final appearance as possible to help make creating the actual accent marks and special characters easier.  I've done this with the example text:
 
To add the acute accent for the three letters in the line that should have it, the steps are:
  1. Left-click the like of text to select it
  2. Use the Copy button located near the bottom of the first column of grey buttons on the left side of the design tool to create a copy of the selected line of text.  It will help to move the copied text to a different area in the design now, to make the following steps easier.  The arrow keys on the keyboard or the mouse may be used to move the copied line of text.  Using this method helps ensure that the marks and special characters being created retain the settings used for the actual text—font, size, color, et cetera.
  3. Look towards the bottom-right of the copied line for the row of four small, semi-transparent buttons and click on the Edit Text button to open the copied line in the text editor. 
  4. In the editor, select the entire line of text so that it is highlighted.  In this example, the highlighted text will appear in white against a black background:
  5. Once the line of text has been highlighted, press the "Backquote" key on your keyboard (sometimes called the Grave Accent key), which is located at the top-left corner of the keyboard for most Windows-based computers.  This will replace the copied line of text with a stand-alone Grave Accent mark:  `
  6. I now have the original line of text and one grave accent mark in my example design. Please note that certain fonts may not include the grave accent [`] mark, so you may have to use an apostrophe, comma, or a "line" image from the clip art instead.  The grave accent mark is still selected, making this a good time to change it so that it faces the proper direction, using the Side-to-Side Mirror button.
  7. Next, I recommend using the +Zoom button to 'zoom in' on the design, as this will help make the following steps easier to accomplish.  In this example design I've clicked on +Zoom ten [10] times.  The scrollbars at the bottom and right sides of the design tool may have to be used to bring the part being worked on back into design tool's workspace.
  8. Because I need a total of three [3] acute accent marks in this design, I've first made sure the mark I have still selected—a selected design element will be surrounded by small black squares, which are the click-&-drag handles that may be used to resize an element freehand; then I've clicked the Copy button twice.  I now have three copies of my acute accent mark that are ready to be moved into position, especially if using the mouse.
  9. The final step needed for these acute marks is moving them into position over the letters that need them and saving the design a final time by using either the green Save or Add to Cart buttons.
To make the Spanish quotation marks (<< and >>) I'll repeat Steps 1-6 above, but with the Less Than symbol entered twice, instead of the Grave Accent.  In Windows, the Less Than symbol is entered using the key combination of SHIFT+< as shown:
The pair of Less Than symbols will be my opening Spanish quotes.  While there are a couple of ways to make the closing Spanish quotation marks the method I recommend is to use the Copy button to make a copy of the opening quotes; then use the Side-to-Side Mirror button to flip the copied marks over so that they 'point' to the right.
 
The marks are then moved into position and the design saved:
 
Accent marks and special characters that are not part of a given font may be entered in a design through creative use of punctuation and clip art.  Please note that the characters available may vary by font.  A list of special characters and ways to create them appears in the table below.
 
Special Character Design Tool Trick
Acute:
Grave accent key; if not included in font an apostrophe or comma may be used.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Grave accent mark; <–> Mirror, move into position.
Circumflex:
Shift+6 key; if not included in font a rotated Less Than [<] or Greater [>] than symbol may be used.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Circumflex accent mark; move into position.
Grave:
Grave accent key; if not included in font an apostrophe or comma may be used.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Grave accent mark; move into position.
Tilde:
Shift + Grave Accent key.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Tilde; move into position.
Umlaut:
Shift + Semi-Colon key.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Colon; Rotate so it is horizontal, move into position.
Inverted Exclamation:
Shift + 1 key.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Exclamation Point; Mirror Vertically so it is upside-down, move into position.  Please Note that when this is added that about half of the mark should extend below the bottom (baseline) of the text.
Inverted Question:
Shift/ key.  Make Copy of text to retain font settings, select all text in copy and replace with stand-alone Question mark; Mirror Vertically so it is upside-down, then Mirror Horizontally so that it 'faces' right, move into position.  Please Note that when this is added that about half of the mark should extend below the bottom (baseline) of the text.
Fraction:
Fractions are one of the more complex elements to create, but are still fairly easy to enter in an online design.  Fractions can be built using a total of three pieces, which are the numerator [n], the forward slash [/], and the denominator [d].  To help keep the fraction from being too much taller than the rest of the text around it, I recommend using the -Size button to reduce the size of the n and d numbers somewhat before moving them into position.
 
If you should have any further questions or concerns, you're welcome to contact our Customer Service (CS) Department by telephone (1-800-494-5850), email (cs@esigns.com), live chat (using the green button located at the left edge of this page), or support ticket.  Our CS personnel are available 9:00 AM - 11:00 PM Eastern, Monday through Friday, and 10:00 AM - 4:00 PM Eastern Saturdays.
 

Add Feedback