Text Examples

The following examples detail the use of text in OmniGraffle documents.

Overlaid Image Caption

By default, graphics have an overlaid text layer than is vertically centered in the middle of the bounding box of the graphic (see left image). You can use the standard text properties to manipulate this text area and to alter the properties of the containing text. The following script is useful as an action for quickly setting up entered or pasted text as an overlaid caption (see right image). Simply select the graphic and run the script.

caption-script
if (document.windows[0].selection.graphics.length != 1){ title = "SELECTION ERROR" message = "Please select a single graphic." new Alert(title, message).show(function(result){}) } else { cnvs = document.windows[0].selection.canvas graphic = document.windows[0].selection.graphics[0] if (graphic.image instanceof ImageReference){ var alert = new Alert("TEXT COLOR", "Should the text be colored white or black?") alert.addOption("White") alert.addOption("Black") alert.addOption("Cancel") alert.show(function(result){ if (result == 0){ chosenColor = Color.white } else if (result == 1){ chosenColor = Color.black } else { throw new Error('script cancelled') } graphic.textVerticalPlacement = VerticalTextPlacement.Bottom graphic.textHorizontalPadding = 24 graphic.textVerticalPadding = 24 graphic.textHorizontalAlignment = HorizontalTextAlignment.Left graphic.fontName = 'Helvetica' graphic.textSize = 18 graphic.textColor = chosenColor }) } else { title = "NO IMAGE" message = "The graphic does not contain an image." new Alert(title, message).show(function(result){}) } }
omnigraffle://localhost/omnijs-run?script=if%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%20%21%3D%201%29%7B%0A%09title%20%3D%20%22SELECTION%20ERROR%22%0A%09message%20%3D%20%22Please%20select%20a%20single%20graphic%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%7D%20else%20%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09graphic%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09if%20%28graphic%2Eimage%20instanceof%20ImageReference%29%7B%0A%09%09var%20alert%20%3D%20new%20Alert%28%22TEXT%20COLOR%22%2C%20%22Should%20the%20text%20be%20colored%20white%20or%20black%3F%22%29%0A%09%09alert%2EaddOption%28%22White%22%29%0A%09%09alert%2EaddOption%28%22Black%22%29%0A%09%09alert%2EaddOption%28%22Cancel%22%29%0A%09%09alert%2Eshow%28function%28result%29%7B%0A%09%09%09if%20%28result%20%3D%3D%200%29%7B%0A%09%09%09%09chosenColor%20%3D%20Color%2Ewhite%0A%09%09%09%7D%20else%20if%20%28result%20%3D%3D%201%29%7B%0A%09%09%09%09chosenColor%20%3D%20Color%2Eblack%0A%09%09%09%7D%20else%20%7B%0A%09%09%09%09throw%20new%20Error%28%27script%20cancelled%27%29%0A%09%09%09%7D%0A%09%09%09graphic%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2EBottom%0A%09%09%09graphic%2EtextHorizontalPadding%20%3D%2024%0A%09%09%09graphic%2EtextVerticalPadding%20%3D%2024%0A%09%09%09graphic%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ELeft%0A%09%09%09graphic%2EfontName%20%3D%20%27Helvetica%27%0A%09%09%09graphic%2EtextSize%20%3D%2018%0A%09%09%09graphic%2EtextColor%20%3D%20chosenColor%0A%09%09%7D%29%0A%09%7D%20else%20%7B%0A%09%09title%20%3D%20%22NO%20IMAGE%22%0A%09%09message%20%3D%20%22The%20graphic%20does%20not%20contain%20an%20image%2E%22%0A%09%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%09%7D%0A%7D

You can alter the previous example script to include the ability to extract the notes of the image and use them as the caption by adding this line to the processing code:

/*{ "type": "action", "targets": ["omnigraffle"], "author": "Otto Automator", "identifier": "com.omni-automation.overlay-image-notes", "description": "This action will set the text of the selected image graphic to the notes of the graphic.", "label": "Overlay Graphic Notes", "shortLabel": "Overlay Notes" }*/ var _ = function(){ var action = new PlugIn.Action(function(selection, sender){ // action code // selection options: canvas, document, graphics, lines, solids, view var graphic = selection.graphics[0] var alert = new Alert("TEXT COLOR", "Should the text be colored white or black?") alert.addOption("White") alert.addOption("Black") alert.addOption("Cancel") alert.show(function(result){ if (result == 0){ chosenColor = Color.white } else if (result == 1){ chosenColor = Color.black } else { throw new Error('script cancelled') } graphic.text = graphic.notes graphic.textVerticalPlacement = VerticalTextPlacement.Bottom graphic.textHorizontalPadding = 24 graphic.textVerticalPadding = 24 graphic.textHorizontalAlignment = HorizontalTextAlignment.Left graphic.fontName = 'Helvetica' graphic.textSize = 18 graphic.textColor = chosenColor }) }); action.validate = function(selection, sender){ // validation code // selection options: canvas, document, graphics, lines, solids, view if(selection.graphics.length === 1){ if (selection.graphics[0].image instanceof ImageReference){ return true } else { return false } } else { return false } }; return action; }(); _;
omnigraffle:///omnijs-run?script=if%20%28document%2Ewindows%5B0%5D%2Eselection%2Egraphics%2Elength%20%21%3D%201%29%7B%0A%09title%20%3D%20%22SELECTION%20ERROR%22%0A%09message%20%3D%20%22Please%20select%20a%20single%20graphic%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%7D%20else%20%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09graphic%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Egraphics%5B0%5D%0A%09if%20%28graphic%2Eimage%20instanceof%20ImageReference%29%7B%0A%09%09var%20alert%20%3D%20new%20Alert%28%22TEXT%20COLOR%22%2C%20%22Should%20the%20text%20be%20colored%20white%20or%20black%3F%22%29%0A%09%09alert%2EaddOption%28%22White%22%29%0A%09%09alert%2EaddOption%28%22Black%22%29%0A%09%09alert%2EaddOption%28%22Cancel%22%29%0A%09%09alert%2Eshow%28function%28result%29%7B%0A%09%09%09if%20%28result%20%3D%3D%200%29%7B%0A%09%09%09%09chosenColor%20%3D%20Color%2Ewhite%0A%09%09%09%7D%20else%20if%20%28result%20%3D%3D%201%29%7B%0A%09%09%09%09chosenColor%20%3D%20Color%2Eblack%0A%09%09%09%7D%20else%20%7B%0A%09%09%09%09throw%20new%20Error%28%27script%20cancelled%27%29%0A%09%09%09%7D%0A%09%09%09graphic%2Etext%20%3D%20graphic%2Enotes%0A%09%09%09graphic%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2EBottom%0A%09%09%09graphic%2EtextHorizontalPadding%20%3D%2024%0A%09%09%09graphic%2EtextVerticalPadding%20%3D%2024%0A%09%09%09graphic%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ELeft%0A%09%09%09graphic%2EfontName%20%3D%20%27Helvetica%27%0A%09%09%09graphic%2EtextSize%20%3D%2018%0A%09%09%09graphic%2EtextColor%20%3D%20chosenColor%0A%09%09%7D%29%0A%09%7D%20else%20%7B%0A%09%09title%20%3D%20%22NO%20IMAGE%22%0A%09%09message%20%3D%20%22The%20graphic%20does%20not%20contain%20an%20image%2E%22%0A%09%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%09%7D%0A%7D

Here’s an installable action that overlays the selected image graphic’s notes:

Size Text to Fit Shape

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-sizing-01 text-sizing-02
function fitTextFontToShapeSize(solid){ // store the current geometry of the shape var startRect = solid.geometry // examine autosizing property of solid var startingSizing = solid.autosizing if (startingSizing == TextAutosizing.Full || startingSizing == TextAutosizing.Vertical) { return // already autosizing, so already fitting } // set the font size parameters var lowest = 5 // min font size to use var highest = 100 // max font size to use // enable vertical autosizing solid.autosizing = TextAutosizing.Vertical // adjust the size of the solid until the height or width matches the stored geometry while ((highest - lowest) > 1) { if ((solid.geometry.width > startRect.width) || (solid.geometry.height > startRect.height)) { highest = solid.textSize } else { lowest = solid.textSize } solid.textSize = lowest + Math.floor((highest - lowest) / 2) } // restore the original geometry and autosizing solid.autosizing = startingSizing solid.geometry = startRect } if (document.windows[0].selection.solids.length != 1){ title = "SELECTION ERROR" message = "Please select a single solid." new Alert(title, message).show(function(result){}) } else { cnvs = document.windows[0].selection.canvas shape = document.windows[0].selection.solids[0] fitTextFontToShapeSize(shape) }
if (document.windows[0].selection.solids.length != 1){ title = "SELECTION ERROR" message = "Please select a single solid." new Alert(title, message).show(function(result){}) } else { cnvs = document.windows[0].selection.canvas shape = document.windows[0].selection.solids[0] fitTextFontToShapeSize(shape) }
omnigraffle:///omnijs-run?script=function%20fitTextFontToShapeSize%28solid%29%7B%0A%09%2F%2F%20store%20the%20current%20geometry%20of%20the%20shape%0A%09var%20startRect%20%3D%20solid%2Egeometry%0A%09%2F%2F%20examine%20autosizing%20property%20of%20solid%0A%09var%20startingSizing%20%3D%20solid%2Eautosizing%0A%09if%20%28startingSizing%20%3D%3D%20TextAutosizing%2EFull%20%7C%7C%20startingSizing%20%3D%3D%20TextAutosizing%2EVertical%29%20%7B%0A%09%09return%20%2F%2F%20already%20autosizing%2C%20so%20already%20fitting%0A%09%7D%0A%09%2F%2F%20set%20the%20font%20size%20parameters%0A%09var%20lowest%20%3D%205%20%2F%2F%20min%20font%20size%20to%20use%0A%09var%20highest%20%3D%20100%20%2F%2F%20max%20font%20size%20to%20use%0A%09%2F%2F%20enable%20vertical%20autosizing%0A%09solid%2Eautosizing%20%3D%20TextAutosizing%2EVertical%0A%09%2F%2F%20adjust%20the%20size%20of%20the%20solid%20until%20the%20height%20or%20width%20matches%20the%20stored%20geometry%0A%09while%20%28%28highest%20-%20lowest%29%20%3E%201%29%20%7B%0A%09%09if%20%28%28solid%2Egeometry%2Ewidth%20%3E%20startRect%2Ewidth%29%20%7C%7C%20%28solid%2Egeometry%2Eheight%20%3E%20startRect%2Eheight%29%29%20%7B%0A%09%09%09highest%20%3D%20solid%2EtextSize%0A%09%09%7D%20else%20%7B%0A%09%09%09lowest%20%3D%20solid%2EtextSize%0A%09%09%7D%0A%09%09solid%2EtextSize%20%3D%20lowest%20%2B%20Math%2Efloor%28%28highest%20-%20lowest%29%20%2F%202%29%0A%09%7D%0A%09%2F%2F%20restore%20the%20original%20geometry%20and%20autosizing%0A%09solid%2Eautosizing%20%3D%20startingSizing%0A%09solid%2Egeometry%20%3D%20startRect%0A%7D%0Aif%20%28document%2Ewindows%5B0%5D%2Eselection%2Esolids%2Elength%20%21%3D%201%29%7B%0A%09title%20%3D%20%22SELECTION%20ERROR%22%0A%09message%20%3D%20%22Please%20select%20a%20single%20solid%2E%22%0A%09new%20Alert%28title%2C%20message%29%2Eshow%28function%28result%29%7B%7D%29%0A%7D%20else%20%7B%0A%09cnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09shape%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Esolids%5B0%5D%0A%09fitTextFontToShapeSize%28shape%29%0A%7D

The Basic Business Letter

OmniGraffle is an incredibly versatile application. It can be used for diagraming, charting, and other forms of data visualization. But it can also be used for basic text processing as well, with complete type control and spell checking!

Here’s a script that will convert the current canvas into a basic business letter, following conventions outlined by the Purdue Online Writing Lab.

pageWidth = 612 pageHeight = 792 marginLeft = 72 marginRight = 72 marginTop = 144 marginBottom = 72 cnvs = document.windows[0].selection.canvas cnvs.size = new Size(pageWidth,pageHeight) cnvs.canvasSizingMode = CanvasSizingMode.Fixed textBodyRect = new Rect(marginLeft,marginTop,pageWidth-marginLeft-marginRight,pageHeight-marginTop-marginBottom) textShape = cnvs.addShape('Rectangle',textBodyRect) textShape.shadowColor = null textShape.strokeColor = null textShape.fontName = "TimesNewRomanPSMT" textShape.autosizing = TextAutosizing.Clip textShape.textHorizontalAlignment = HorizontalTextAlignment.Left textShape.textVerticalPlacement = VerticalTextPlacement.Top textShape.textHorizontalPadding = 0 textShape.textVerticalPadding = 0 textShape.text = "<%Date%>\n\n<#R-FULLNAME#>\n<#R-STREETADDRESS#>\n<#R-CITY#>, <#R-STATECODE#> <#R-ZIPCODE#>\n\nDear <#R-TITLE#> <#R-LASTNAME#>:\n\n<#LETTERBODY#>\n\nSincerely,\n\n\n\n\n<#S-FULLNAME#>, <#S-COMPANY#>\n<#S-STREETADDRESS#>\n<#S-CITY#>, <#S-STATECODE#> <#S-ZIPCODE#>\n\n\n\n\nEnclosures: 0"
omnigraffle://localhost/omnijs-run?script=pageWidth%20%3D%20612%0ApageHeight%20%3D%20792%0AmarginLeft%20%3D%2072%0AmarginRight%20%3D%2072%0AmarginTop%20%3D%20144%0AmarginBottom%20%3D%2072%0Acnvs%20%3D%20document%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0Acnvs%2Esize%20%3D%20new%20Size%28pageWidth%2CpageHeight%29%0Acnvs%2EcanvasSizingMode%20%3D%20CanvasSizingMode%2EFixed%0AtextBodyRect%20%3D%20new%20Rect%28marginLeft%2CmarginTop%2CpageWidth-marginLeft-marginRight%2CpageHeight-marginTop-marginBottom%29%0AtextShape%20%3D%20cnvs%2EaddShape%28%27Rectangle%27%2CtextBodyRect%29%0AtextShape%2EshadowColor%20%3D%20null%0AtextShape%2EstrokeColor%20%3D%20null%0AtextShape%2EfontName%20%3D%20%22TimesNewRomanPSMT%22%0AtextShape%2Eautosizing%20%3D%20TextAutosizing%2EClip%0AtextShape%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ELeft%0AtextShape%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2ETop%0AtextShape%2EtextHorizontalPadding%20%3D%200%0AtextShape%2EtextVerticalPadding%20%3D%200%0AtextShape%2Etext%20%3D%20%22%3C%25Date%25%3E%5Cn%5Cn%3C%23R-FULLNAME%23%3E%5Cn%3C%23R-STREETADDRESS%23%3E%5Cn%3C%23R-CITY%23%3E%2C%20%3C%23R-STATECODE%23%3E%20%3C%23R-ZIPCODE%23%3E%5Cn%5CnDear%20%3C%23R-TITLE%23%3E%20%3C%23R-LASTNAME%23%3E%3A%5Cn%5Cn%3C%23LETTERBODY%23%3E%5Cn%5CnSincerely%2C%5Cn%5Cn%5Cn%5Cn%5Cn%3C%23S-FULLNAME%23%3E%2C%20%3C%23S-COMPANY%23%3E%5Cn%3C%23S-STREETADDRESS%23%3E%5Cn%3C%23S-CITY%23%3E%2C%20%3C%23S-STATECODE%23%3E%20%3C%23S-ZIPCODE%23%3E%5Cn%5Cn%5Cn%5Cn%5CnEnclosures%3A%200%22
business-letter

Here’s a version of the previous script that uses the makeNew() method of the Document class to add a business letter canvas to a new document.

Document.makeNew(function(doc){ doc.show() pageWidth = 612 pageHeight = 792 marginLeft = 72 marginRight = 72 marginTop = 144 marginBottom = 72 cnvs = doc.windows[0].selection.canvas cnvs.size = new Size(pageWidth,pageHeight) cnvs.canvasSizingMode = CanvasSizingMode.Fixed textBodyRect = new Rect(marginLeft,marginTop,pageWidth-marginLeft-marginRight,pageHeight-marginTop-marginBottom) textShape = cnvs.addShape('Rectangle',textBodyRect) textShape.shadowColor = null textShape.strokeColor = null textShape.fontName = "TimesNewRomanPSMT" textShape.autosizing = TextAutosizing.Clip textShape.textHorizontalAlignment = HorizontalTextAlignment.Left textShape.textVerticalPlacement = VerticalTextPlacement.Top textShape.textHorizontalPadding = 0 textShape.textVerticalPadding = 0 textShape.text = "<%Date%>\n\n<#R-FULLNAME#>\n<#R-STREETADDRESS#>\n<#R-CITY#>, <#R-STATECODE#> <#R-ZIPCODE#>\n\nDear <#R-TITLE#> <#R-LASTNAME#>:\n\n<#LETTERBODY#>\n\nSincerely,\n\n\n\n\n<#S-FULLNAME#>, <#S-COMPANY#>\n<#S-STREETADDRESS#>\n<#S-CITY#>, <#S-STATECODE#> <#S-ZIPCODE#>\n\n\n\n\nEnclosures: 0" })
omnigraffle://localhost/omnijs-run?script=Document%2EmakeNew%28function%28doc%29%7B%0A%09doc%2Eshow%28%29%0A%09pageWidth%20%3D%20612%0A%09pageHeight%20%3D%20792%0A%09marginLeft%20%3D%2072%0A%09marginRight%20%3D%2072%0A%09marginTop%20%3D%20144%0A%09marginBottom%20%3D%2072%0A%09cnvs%20%3D%20doc%2Ewindows%5B0%5D%2Eselection%2Ecanvas%0A%09cnvs%2Esize%20%3D%20new%20Size%28pageWidth%2CpageHeight%29%0A%09cnvs%2EcanvasSizingMode%20%3D%20CanvasSizingMode%2EFixed%0A%09textBodyRect%20%3D%20new%20Rect%28marginLeft%2C%20marginTop%2C%20pageWidth-marginLeft-marginRight%2C%20pageHeight-marginTop-marginBottom%29%0A%09textShape%20%3D%20cnvs%2EaddShape%28%27Rectangle%27%2CtextBodyRect%29%0A%09textShape%2EshadowColor%20%3D%20null%0A%09textShape%2EstrokeColor%20%3D%20null%0A%09textShape%2EfontName%20%3D%20%22TimesNewRomanPSMT%22%0A%09textShape%2Eautosizing%20%3D%20TextAutosizing%2EClip%0A%09textShape%2EtextHorizontalAlignment%20%3D%20HorizontalTextAlignment%2ELeft%0A%09textShape%2EtextVerticalPlacement%20%3D%20VerticalTextPlacement%2ETop%0A%09textShape%2EtextHorizontalPadding%20%3D%200%0A%09textShape%2EtextVerticalPadding%20%3D%200%0A%09textShape%2Etext%20%3D%20%22%3C%25Date%25%3E%5Cn%5Cn%3C%23R-FULLNAME%23%3E%5Cn%3C%23R-STREETADDRESS%23%3E%5Cn%3C%23R-CITY%23%3E%2C%20%3C%23R-STATECODE%23%3E%20%3C%23R-ZIPCODE%23%3E%5Cn%5CnDear%20%3C%23R-TITLE%23%3E%20%3C%23R-LASTNAME%23%3E%3A%5Cn%5Cn%3C%23LETTERBODY%23%3E%5Cn%5CnSincerely%2C%5Cn%5Cn%5Cn%5Cn%5Cn%3C%23S-FULLNAME%23%3E%2C%20%3C%23S-COMPANY%23%3E%5Cn%3C%23S-STREETADDRESS%23%3E%5Cn%3C%23S-CITY%23%3E%2C%20%3C%23S-STATECODE%23%3E%20%3C%23S-ZIPCODE%23%3E%5Cn%5Cn%5Cn%5Cn%5CnEnclosures%3A%200%22%0A%7D%29
UNDER CONSTRUCTION

This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.

DISCLAIMER