flashx.textLayout.elements

# SpanElement - AS3

Package | flashx.textLayout.elements
Class | public class SpanElement
Inheritance | SpanElement FlowLeafElement FlowElement Object
Subclasses | SpecialCharacterElement

Language Version: | ActionScript 3.0

Runtime Versions: | Flash Player 10, AIR 1.5

The SpanElement class represents a run of text that has a single set of formatting attributes applied. SpanElement objects contain the text in a paragraph. A simple paragraph (ParagraphElement) includes one or more SpanElement objects.

A ParagraphElement will have a single SpanElement object if all the text in the paragraph shares the same set of attributes. It has multiple SpanElement objects if the text in the paragraph has multiple formats.

Default MXML Property `mxmlChildren`

View the examples

More examples

Creating TextFlow objects

Related API Elements

FlowElement
ParagraphElement
TextFlow

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined By
--- | --- | ---
|  | alignmentBaseline : * TextLayoutFormat: Specifies the baseline to which the dominant baseline aligns. | FlowElement
|  | backgroundAlpha : * TextLayoutFormat: Alpha (transparency) value for the background (adopts default value if undefined during cascade). | FlowElement
|  | backgroundColor : * TextLayoutFormat: Background color of the text (adopts default value if undefined during cascade). | FlowElement
|  | baselineShift : * TextLayoutFormat: Amount to shift the baseline from the dominantBaseline value. | FlowElement
|  | blockProgression : * TextLayoutFormat: Specifies a vertical or horizontal progression of line placement. | FlowElement
|  | breakOpportunity : * TextLayoutFormat: Controls where lines are allowed to break when breaking wrapping text into multiple lines. | FlowElement
|  | cffHinting : * TextLayoutFormat: The type of CFF hinting used for this text. | FlowElement
|  | clearFloats : * TextLayoutFormat: Controls how text wraps around a float. | FlowElement
|  | color : * TextLayoutFormat: Color of the text. | FlowElement
|  | columnCount : * TextLayoutFormat: Number of text columns (adopts default value if undefined during cascade). | FlowElement
|  | columnGap : * TextLayoutFormat: Specifies the amount of gutter space, in pixels, to leave between the columns (adopts default value if undefined during cascade). | FlowElement
|  | columnWidth : * TextLayoutFormat: Column width in pixels (adopts default value if undefined during cascade). | FlowElement
|  | computedFormat : flashx.textLayout.formats:ITextLayoutFormat [override] [read-only] The computed text format attributes that are in effect for this element. | FlowLeafElement
|  | constructor : Object A reference to the class object or constructor function for a given object instance. | Object
|  | coreStyles : Object [read-only] Returns the coreStyles on this FlowElement. | FlowElement
|  | digitCase : * TextLayoutFormat: The type of digit case used for this text. | FlowElement
|  | digitWidth : * TextLayoutFormat: Type of digit width used for this text. | FlowElement
|  | direction : * TextLayoutFormat: Specifies the default bidirectional embedding level of the text in the text block. | FlowElement
|  | dominantBaseline : * TextLayoutFormat: Specifies which element baseline snaps to the alignmentBaseline to determine the vertical position of the element on the line. | FlowElement
|  | firstBaselineOffset : * TextLayoutFormat: Specifies the baseline position of the first line in the container. | FlowElement
|  | fontFamily : * TextLayoutFormat: The name of the font to use, or a comma-separated list of font names. | FlowElement
|  | fontLookup : * TextLayoutFormat: Font lookup to use. | FlowElement
|  | fontSize : * TextLayoutFormat: The size of the text in pixels. | FlowElement
|  | fontStyle : * TextLayoutFormat: Style of text. | FlowElement
|  | fontWeight : * TextLayoutFormat: Weight of text. | FlowElement
|  | format : flashx.textLayout.formats:ITextLayoutFormat TextLayoutFormat properties applied directly to this element. | FlowElement
|  | id : String Assigns an identifying name to the element, making it possible to set a style for the element by referencing the id. | FlowElement
|  | justificationRule : * TextLayoutFormat: Rule used to justify text in a paragraph. | FlowElement
|  | justificationStyle : * TextLayoutFormat: The style used for justification of the paragraph. | FlowElement
|  | kerning : * TextLayoutFormat: Kerning adjusts the pixels between certain character pairs to improve readability. | FlowElement
|  | leadingModel : * TextLayoutFormat: Specifies the leading model, which is a combination of leading basis and leading direction. | FlowElement
|  | ligatureLevel : * TextLayoutFormat: Controls which of the ligatures that are defined in the font may be used in the text. | FlowElement
|  | lineBreak : * TextLayoutFormat: Controls word wrapping within the container (adopts default value if undefined during cascade). | FlowElement
|  | lineHeight : * TextLayoutFormat: Leading controls for the text. | FlowElement
|  | lineThrough : * TextLayoutFormat: If true, applies strikethrough, a line drawn through the middle of the text. | FlowElement
|  | linkActiveFormat : * TextLayoutFormat: Defines the formatting attributes used for links in normal state. | FlowElement
|  | linkHoverFormat : * TextLayoutFormat: Defines the formatting attributes used for links in hover state, when the mouse is within the bounds (rolling over) a link. | FlowElement
|  | linkNormalFormat : * TextLayoutFormat: Defines the formatting attributes used for links in normal state. | FlowElement
|  | listAutoPadding : * TextLayoutFormat: This specifies an auto indent for the start edge of lists when the padding value of the list on that side is auto. | FlowElement
|  | listMarkerFormat : * TextLayoutFormat: Defines the formatting attributes list markers. | FlowElement
|  | listStylePosition : * TextLayoutFormat: Legal values are ListStylePosition.INSIDE, ListStylePosition.OUTSIDE, FormatValue.INHERIT. Default value is undefined indicating not set. If undefined during the cascade this property will inherit its value from an ancestor. | FlowElement
|  | listStyleType : * TextLayoutFormat: Legal values are ListStyleType.UPPER_ALPHA, ListStyleType.LOWER_ALPHA, ListStyleType.UPPER_ROMAN, ListStyleType.LOWER_ROMAN, ListStyleType.NONE, ListStyleType.DISC, ListStyleType.CIRCLE, ListStyleType.SQUARE, ListStyleType.BOX, ListStyleType.CHECK, ListStyleType.DIAMOND, ListStyleType.HYPHEN, ListStyleType.ARABIC_INDIC, ListStyleType.BENGALI, ListStyleType.DECIMAL, ListStyleType.DECIMAL_LEADING_ZERO, ListStyleType.DEVANAGARI, ListStyleType.GUJARATI, ListStyleType.GURMUKHI, ListStyleType.KANNADA, ListStyleType.PERSIAN, ListStyleType.THAI, ListStyleType.URDU, ListStyleType.CJK_EARTHLY_BRANCH, ListStyleType.CJK_HEAVENLY_STEM, ListStyleType.HANGUL, ListStyleType.HANGUL_CONSTANT, ListStyleType.HIRAGANA, ListStyleType.HIRAGANA_IROHA, ListStyleType.KATAKANA, ListStyleType.KATAKANA_IROHA, ListStyleType.LOWER_ALPHA, ListStyleType.LOWER_GREEK, ListStyleType.LOWER_LATIN, ListStyleType.UPPER_ALPHA, ListStyleType.UPPER_GREEK, ListStyleType.UPPER_LATIN, FormatValue.INHERIT. Default value is undefined indicating not set. If undefined during the cascade this property will inherit its value from an ancestor. | FlowElement
|  | locale : * TextLayoutFormat: The locale of the text. | FlowElement
|  | mxmlChildren : Array Sets text based on content within span tags; always deletes existing children. | SpanElement
|  | paddingBottom : * TextLayoutFormat: Bottom inset in pixels. | FlowElement
|  | paddingLeft : * TextLayoutFormat: Left inset in pixels. | FlowElement
|  | paddingRight : * TextLayoutFormat: Right inset in pixels. | FlowElement
|  | paddingTop : * TextLayoutFormat: Top inset in pixels. | FlowElement
|  | paragraphEndIndent : * TextLayoutFormat: A Number that specifies, in pixels, the amount to indent the paragraph's end edge. | FlowElement
|  | paragraphSpaceAfter : * TextLayoutFormat: A Number that specifies the amount of space, in pixels, to leave after the paragraph. | FlowElement
|  | paragraphSpaceBefore : * TextLayoutFormat: A Number that specifies the amount of space, in pixels, to leave before the paragraph. | FlowElement
|  | paragraphStartIndent : * TextLayoutFormat: A Number that specifies, in pixels, the amount to indent the paragraph's start edge. | FlowElement
|  | parent : FlowGroupElement [read-only] Returns the parent of this FlowElement object. | FlowElement
|  | parentRelativeEnd : int [read-only] Returns the relative end of this FlowElement object in the parent. | FlowElement
|  | parentRelativeStart : int [read-only] Returns the relative start of this FlowElement object in the parent. | FlowElement
|  | renderingMode : * TextLayoutFormat: The rendering mode used for this text. | FlowElement
|  | styleName : * TextLayoutFormat: Assigns an identifying class to the element, making it possible to set a style for the element by referencing the styleName. | FlowElement
|  | styles : Object [read-only] Returns the styles on this FlowElement. | FlowElement
|  | tabStops : * TextLayoutFormat: Specifies the tab stops associated with the paragraph. | FlowElement
|  | text : String Receives the String of text that this SpanElement object holds. | SpanElement
|  | textAlign : * TextLayoutFormat: Alignment of lines in the paragraph relative to the container. | FlowElement
|  | textAlignLast : * TextLayoutFormat: Alignment of the last (or only) line in the paragraph relative to the container in justified text. | FlowElement
|  | textAlpha : * TextLayoutFormat: Alpha (transparency) value for the text. | FlowElement
|  | textDecoration : * TextLayoutFormat: Decoration on text. | FlowElement
|  | textIndent : * TextLayoutFormat: A Number that specifies, in pixels, the amount to indent the first line of the paragraph. | FlowElement
|  | textJustify : * TextLayoutFormat: Specifies options for justifying text. | FlowElement
|  | textLength : int [read-only] Returns the total length of text owned by this FlowElement object and its children. | FlowElement
|  | textRotation : * TextLayoutFormat: Determines the number of degrees to rotate this text. | FlowElement
|  | tracking : Object [write-only] Sets the tracking and is synonymous with the trackingRight property. | FlowElement
|  | trackingLeft : * TextLayoutFormat: Number in pixels (or percent of fontSize, like 120%) indicating the amount of tracking (manual kerning) to be applied to the left of each character. | FlowElement
|  | trackingRight : * TextLayoutFormat: Number in pixels (or percent of fontSize, like 120%) indicating the amount of tracking (manual kerning) to be applied to the right of each character. | FlowElement
|  | typeName : String Each FlowElement has a typeName. | FlowElement
|  | typographicCase : * TextLayoutFormat: The type of typographic case used for this text. | FlowElement
|  | userStyles : Object Allows you to read and write user styles on a FlowElement object. | FlowElement
|  | verticalAlign : * TextLayoutFormat: Vertical alignment or justification (adopts default value if undefined during cascade). | FlowElement
|  | whiteSpaceCollapse : * TextLayoutFormat: Collapses or preserves whitespace when importing text into a TextFlow. | FlowElement
|  | wordSpacing : * TextLayoutFormat: Specifies the optimum, minimum, and maximum spacing (as a multiplier of the width of a normal space) between words to use during justification. | FlowElement

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined By
--- | --- | ---
|  | SpanElement() Constructor - creates a SpanElement object to hold a run of text in a paragraph. | SpanElement
|  | clearStyle(styleProp:String):void Clears the style specified by the styleProp parameter from this FlowElement object. | FlowElement
|  | deepCopy(relativeStart:int = 0, relativeEnd:int = -1):FlowElement Makes a deep copy of this FlowElement object, including any children, copying the content between the two specified character positions and returning the copy as a FlowElement object. | FlowElement
|  | equalUserStyles(otherElement:FlowElement):Boolean Compare the userStyles of this with otherElement's userStyles. | FlowElement
|  | getAbsoluteStart():int Returns the start location of the element in the text flow as an absolute index. | FlowElement
|  | getCharAtPosition(relativePosition:int):String Returns the character at the specified position, relative to this FlowElement object. | FlowElement
|  | getCharCodeAtPosition(relativePosition:int):int Returns the character code at the specified position, relative to this FlowElement. | FlowElement
|  | getComputedFontMetrics():FontMetrics Returns the FontMetrics object for the span. | FlowLeafElement
|  | getElementRelativeStart(ancestorElement:FlowElement):int Returns the start of this element relative to an ancestor element. | FlowElement
|  | getNextLeaf(limitElement:FlowGroupElement = null):FlowLeafElement Returns the next FlowLeafElement object. | FlowLeafElement
|  | getNextSibling():FlowElement Returns the next FlowElement sibling in the text flow hierarchy. | FlowElement
|  | getParagraph():ParagraphElement Returns the ParagraphElement object associated with this element. | FlowElement
|  | getPreviousLeaf(limitElement:FlowGroupElement = null):FlowLeafElement Returns the previous FlowLeafElement object. | FlowLeafElement
|  | getPreviousSibling():FlowElement Returns the previous FlowElement sibling in the text flow hierarchy. | FlowElement
|  | getStyle(styleProp:String):* Returns the value of the style specified by the styleProp parameter, which specifies the style name and can include any user style name. | FlowElement
|  | getText(relativeStart:int = 0, relativeEnd:int = -1, paragraphSeparator:String = " "):String Gets the specified range of text from a flow element. | FlowElement
|  | getTextFlow():flashx.textLayout.elements:TextFlow Climbs the text flow hierarchy to return the root TextFlow object for the element. | FlowElement
|  | hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined. | Object
|  | initialized(document:Object, id:String):void Called for MXML objects after the implementing object has been created and all component properties specified on the MXML tag have been initialized. | FlowElement
|  | isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter. | Object
|  | propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable. | Object
|  | replaceText(relativeStartPosition:int, relativeEndPosition:int, textValue:String):void Updates the text in text span based on the specified start and end positions. | SpanElement
|  | setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations. | Object
|  | setStyle(styleProp:String, newValue:*):void Sets the style specified by the styleProp parameter to the value specified by the newValue parameter. | FlowElement
|  | shallowCopy(relativeStart:int = 0, relativeEnd:int = -1):FlowElement Makes a copy of this FlowElement object, copying the content between two specified character positions. | FlowElement
|  | splitAtPosition(relativePosition:int):FlowElement Splits this FlowElement object at the position specified by the relativePosition parameter, which is a relative position in the text for this element. | FlowElement
|  | toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions. | Object
|  | toString():String Returns the string representation of the specified object. | Object
|  | valueOf():Object Returns the primitive value of the specified object. | Object

Property Detail

### mxmlChildren

property

`mxmlChildren:Array`

Language Version: | ActionScript 3.0

Runtime Versions: | Flash Player 10, AIR 1.5

Sets text based on content within span tags; always deletes existing children. This property is intended for use during MXML compiled import in Flex. Flash Professional ignores this property. When TLF markup elements have other TLF markup elements as children, the children are assigned to this property.

Implementation
`public function get mxmlChildren():Array`
`public function set mxmlChildren(value:Array):void`
Throws

| `TypeError` — If array element is not a SpecialCharacterElement or a String.

### text

property

`text:String`

Language Version: | ActionScript 3.0

Runtime Versions: | Flash Player 10, AIR 1.5

Receives the String of text that this SpanElement object holds.

The text of a span does not include the carriage return (CR) at the end of the paragraph but it is included in the value of `textLength`.

Implementation
`public function get text():String`
`public function set text(value:String):void`
Constructor Detail

### SpanElement

()
Constructor

`public function SpanElement()`

Language Version: | ActionScript 3.0

Runtime Versions: | Flash Player 10, AIR 1.5

Constructor - creates a SpanElement object to hold a run of text in a paragraph.

Method Detail

### replaceText

()
method

`public function replaceText(relativeStartPosition:int, relativeEndPosition:int, textValue:String):void`

Language Version: | ActionScript 3.0

Runtime Versions: | Flash Player 10, AIR 1.5

Updates the text in text span based on the specified start and end positions. To insert text, set the end position equal to the start position. To append text to the existing text in the span, set the start position and the end position equal to the length of the existing text.

The replaced text includes the start character and up to but not including the end character.

Parameters

| `relativeStartPosition:int` — The index position of the beginning of the text to be replaced, relative to the start of the span. The first character in the span is at position 0.
| `relativeEndPosition:int` — The index one position after the last character of the text to be replaced, relative to the start of the span. Set this value equal to `relativeStartPos` for an insert.
| `textValue:String` — The replacement text or the text to add, as the case may be.

Throws

| `RangeError` — The `relativeStartPosition` or `relativeEndPosition` specified is out of range or a surrogate pair is being split as a result of the replace.

Example ( How to use this example )
This example calls replaceText() several times to do the following: insert a string at the beginning of text; append a string to the end of text; insert a string in the middle of text; replace text entirely with a new string.

The example uses a second span (span2) to display the results.

Copy

    package flashx.textLayout.elements.examples
    {
        import flash.display.Sprite;
        import flashx.textLayout.container.ContainerController;
        import flashx.textLayout.elements.ParagraphElement;
        import flashx.textLayout.elements.SpanElement;
        import flashx.textLayout.elements.TextFlow;

        public class SpanElement_replaceTextExample  extends Sprite
        {
            public function SpanElement_replaceTextExample()
            {
                // create container and add it to the stage
                var container:Sprite = new Sprite();
                this.stage.addChild(container);
                // create TextFlow, ParagraphElement, and SpanElement objects
                var textFlow:TextFlow = new TextFlow();
                var paragraph:ParagraphElement = new ParagraphElement();
                var span:SpanElement = new SpanElement;
                var span2:SpanElement = new SpanElement;
                // add composer and container controller
                var controller:ContainerController = new ContainerController(container, 200, 700 );
                textFlow.flowComposer.addController(controller);
                textFlow.fontSize = 24;    // set font size
                // create text string and add it to the span
                var str:String = "0123456";
                span.text = str;
                // insert at the beginning
                span.replaceText(0, 0, "abc");
                span2.text = span.text + '\n';
                // append to the end of the text
                span.replaceText(10, 10, "abc");
                span2.text += span.text + '\n';
                // insert string in the middle of the text
                span.replaceText(5, 8, "abc");
                span2.text += span.text + '\n';
                // replace text with string
                span.replaceText(0, 13, "abc");
                span2.text += span.text + '\n';
                // replace text with string
                span.replaceText(0, 3, "That's all she wrote!\n");
                span2.text += span.text + '\n';
                // display the results
                paragraph.addChild(span2);
                textFlow.addChild(paragraph);
                textFlow.flowComposer.updateAllControllers();
            }
        }
    }

Examples How to use this example
SpanElementExample.as
This example displays Hello World using two SpanElement objects that have different styles.
Copy

    package flashx.textLayout.elements.examples
    {
        import flash.display.Sprite;
        import flash.text.engine.FontPosture;
        import flashx.textLayout.container.ContainerController;
        import flashx.textLayout.elements.ParagraphElement;
        import flashx.textLayout.elements.SpanElement;
        import flashx.textLayout.elements.TextFlow;

        public class SpanElementExample  extends Sprite
        {
            public function SpanElementExample()
            {
                // create a container and add it to the stage
                var container:Sprite = new Sprite();
                this.stage.addChild(container);
                // create TextFlow, ParagraphElement, and SpanElement objects
                var textFlow:TextFlow = new TextFlow();
                var p:ParagraphElement = new ParagraphElement();
                var spanHello:SpanElement = new SpanElement();
                var spanWorld:SpanElement = new SpanElement();
                // add text and styles to the spans
                spanHello.text = "Hello, ";
                spanHello.fontSize = 48;
                spanWorld.text = "World!";
                spanWorld.fontSize = 56;
                spanWorld.fontStyle = FontPosture.ITALIC;
                spanWorld.color = 0xFFCC00;
                // add spans to paragraph, paragraph to text flow
                p.addChild(spanHello);
                p.addChild(spanWorld);
                textFlow.addChild(p);
                // update controller to display text
                var controller:ContainerController = new ContainerController(container, 400, 200 );
                textFlow.flowComposer.addController(controller);
                textFlow.flowComposer.updateAllControllers();
            }
        }
    }

© 2015 Adobe Systems Incorporated. All rights reserved.
Mon Apr 10 2017, 12:28 PM -07:00