A ligature is a character, stroke or bar that connects two letters. These character combinations are particularly important with the Yale Design Fonts to ensure the proper spacing of the letters when rendering the headings on a browser window.

How was this done?

The YaleSites themes incorporate the Typogrify module to adjust the characters for readability. This solution allows content editors to write the way they normally do without requiring the use of special keystrokes or character maps to produce ligatures. In addition, words keep their correct spelling for accessibility and search engine optimization.

As distributed, the Yale Design fonts have their ffi, ffl and ff characters mapped to non-standard Unicode entity values. This first required correcting the OpenType fonts so that these ligatures were mapped to their standard Unicode values. A JavaScript was then added that looks for headings containing the “f” character strings and replaces these with their Unicode ligatures. Finally, the module was configured to replace typographers quotation marks and dashes. Optional filters for the Typogrify module include:

• Multiple adjacent capital letters can be made small-caps
• Ampersands can be made italic

Important Notes:

• Menus and breadcrumbs only show normal letters, not ligatures. The menu item at left and the breadcrumb item at top reflect the page title.
• Verdana body text remains unchanged because ligatures in this font do not display properly in Windows, fi ff fl ffi ffl

Examples of Character Combinations

The Yale typeface have been typed as normal letters and they’re replaced with ligatures automatically to ensure proper spacing.

fi ff fl ffi ffl

Roman

Bold

Italic

Bold Italic

Accent and Diacritic Marks: double dash becomes endash, triple dash becomes emdash.

Ò » ñ é ç–ô—ü í…

 ”Straight quotes” are converted to curly quotes, and an initial quote hangs left. A single quotation mark produces an apostrophe. This only applies to header text.

“Jayhawks” & KU fans behave extremely obnoxiously.

Widow control is also enabled in heading text, as demonstrated above.

There are times when you need to separate words or phrases in the content for your site. In the world of typography, there are distinct differences between a hyphen, en dashes and em dashes used to separate words or phrases. Often, when writing for a website, you need to use cumbersome keystroke combinations to get the correct size of your dash. However, if you follow these simple conventions, the text on your YaleSite will display dashes correctly.

This page is all about images and the placement of images in the body area of the page. As you can see from the images below, you can vary the size and location of your images, as well as include captions below the images.

To create an image that spans across the top of the content page, upload an image that is 450px wide and whatever height you want. If you are using this page as a news article, you should put content above the page, otherwise the teaser in the view will not display.

Placing an image to the left of the page

You can place an image to the left of the text by assigning the Image Left style from the WYSIWYG toolbar. Simply select the image and select the style from the list and the image will float to the left.

Placing the image to the right of the page

You can place an image to the right of the text by assigning the Image Right style from the WYSIWYG toolbar. Simply select the image and select the style from the list and the image will float to the left.

Important Note: The Left and Right image styles do not show up in the list until the image is selected.

Adding the Caption

Captions can now be placed below the image that is entered in the body section of the text. When you add the image, click on the Advanced tab and enter the text in the Advisory Title field. This text displays below the image.

Tigerman’s work has earned him critical acclaim and countless awards, especially in Chicago, where his practice has flourished for more than a half-century. The work of his firm has been exhibited more than 300 times in major galleries and art museums around the world, including the Art Institute of Chicago, the Metropolitan Museum and the Museum of Modern Art in New York. In 2007, Tigerman and his partner, Margaret McCurry, were named by Architectural Digest to its list of the top 100 architects and designers in the world.

The opening of “Ceci n’est pas une reverie” in New Haven coincides with the book launch of Tigerman’s collected writings 1964-2011, titled “Schlepping Through Ambivalence: Essays on an American Architectural Condition,” published by Yale University Press. It also coincides with the release of Tigerman’s autobiography, “Designing Bridges to Burn: Architectural Memoirs by Stanley Tigerman,” published by ORO Editions.

Also on display are such diverse objects as tableware Tigerman designed for Swid Powell, and his designs for Cannon Fieldcrest and Alessi. The exhibit also includes oil paintings from the “I Pledge Allegiance” series in the mid-1960s, “Architoons” and travel sketches from the 1970s onwards. The exhibition will be accompanied by both historical video material of Tigerman’s lectures and interviews, and a new video interview with Tigerman and others, produced by Karen Carter Lynch.

Syntax highlighting is a feature that allows source code to be formatted and highlighted correctly based on a programming language. To add this to your site:

1. Enable the Syntax Highlighter module by visiting the Modules page.
2. Next, visit the Filtered HTML text format page by navigating to Configuration > Content authoring > Text formats > Filtered HTML.
3. Under Enabled Filters, check Syntax Highlighter, then under Filter processing order below that, drag the Syntax Highlighter filter below the WYSIWYG Filter. This order is important, as syntax highlighting will not work in any other order.
4. Visit the Syntax highlighter setting page under Configuration > Content authoring > Syntax highlighter. From this page, enable programming languages that should have their syntax highlighted, then Save.
5. Last, you need to configure the CKEditor button settings. Visit Configuration > Content authoring > CKEditor and edit the Advanced profile. Expand the Editor Appearance fieldset, scroll down to Plugins, and check Plugin file: syntaxhighlight. This will enable the {…} code button on the toolbar.
6. Scroll down and expand the Advanced options fieldset, and set the Spellchecker setting to No. This disables the automatic Spell Check As You Type feature, since there is an incompatibility with syntax highlighting. Click the Save button to save the CKEditor settings.
7. You can now edit or create new content, and click the {…} code button on the toolbar to insert source code. Pick a language and enter your code, and it will automatically format it after saving the content.