flash & CSS paragraph spacing

I still can’t believe margin-top and margin-bottom aren’t supported, but whatever. Here’s a hack.

DOWNLOAD SRC

How it works:
The method you’ll need to modify is setCSS(_css : StyleSheet); For each paragraph style in your XML, call setLineSpacing(_pTag : String, _pSpacing : Number = 0), passing the opening tag of your xml paragraph, and the amount of space, in points, you want above it. The actionscript runs through your xml and prepends a <spacer> tag with fontSize styled to the points specified.

MyTextField.as

package com {

import flash.text.AntiAliasType;

import flash.text.StyleSheet;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFormat;


public class MyTextField extends TextField {


private var initCopy : String;

private var modifiedCopy : String;

private var tags : Array;


public function MyTextField(_s : String, _w : Number = 0, _h : Number = 0) {

//trace(‘MyTextField: + (s));


initCopy = _s;

modifiedCopy = (_s);

if(_w) {

width = _w;

wordWrap = true;

}

if(_h) {

height = _h;

wordWrap = true;

}

antiAliasType = AntiAliasType.ADVANCED;

selectable = false;

autoSize = TextFieldAutoSize.LEFT;

embedFonts = true;

multiline = true;

htmlText = _s;

mouseEnabled = false;

//border = true;

}


override public function setTextFormat(_format : TextFormat, _beginIndex : int = -1, _endIndex : int = -1) : void {

//trace(‘setTextFormat: + (format.font));

if(_format.italic && !embedFonts) {

htmlText = text + ” “;

}

super.setTextFormat(_format, _beginIndex, _endIndex);

defaultTextFormat = _format;

}


public function setCSS(_css : StyleSheet) : void {

styleSheet = _css;

setLineSpacing(“<pa>”, 5);

setLineSpacing(“<pa class=\”style1\”>”, 10);

setLineSpacing(“<pa class=\”style2\”>”, 20);

htmlText = modifiedCopy;

}


private function setLineSpacing(_pTag : String, _pSpacing : Number = 0) : void {

if (!tags) {

tags = [];

}

tags.push(_pTag);

var _copyElem : Array = modifiedCopy.split(_pTag);

var _newCopy : String;


if (!styleSheet) {

styleSheet = new StyleSheet;

}


var _spacerID:String = “spacer” + tags.length;

var _sTag : String = (“<“ + _spacerID + “> </” + _spacerID + “>” + _pTag);

_newCopy = _copyElem.join(_sTag);

styleSheet.setStyle(_spacerID, {fontSize:String(_pSpacing + “px”), fontFamily:“Arial”});


modifiedCopy = _newCopy;

}


public function shrinkToFit(_w : Number) : void {

while(width > _w) {

scaleX -= 0.1;

scaleY = scaleX;

}

}


public function truncate(_maxWidth : Number = 200, _maxLines : Number = 1, _ellipsis : Boolean = false) : String {

multiline = true;

wordWrap = true;

width = _maxWidth;

//for some reason it does not work unless width gets (evaluated)… weird!

width = (width);

var _newCopy : String = (htmlText);

while(numLines > _maxLines) {

_newCopy = _newCopy.slice(0, _newCopy.length – 2);

htmlText = _newCopy;

setTextFormat(getTextFormat());

}

if (_ellipsis) {

_newCopy = _newCopy.slice(0, _newCopy.length – 3);

_newCopy += “…”;

htmlText = _newCopy;

setTextFormat(getTextFormat());

}

return _newCopy;

}


public function toTitleCase() : String {

var _words : Array = text.split(” “);

for (var i : int = 0;i < _words.length; i++) {

var _word : String = _words[i];

var _newWord : String = _word.charAt(0).toUpperCase() + _word.substr(1, _word.length – 1).toLowerCase();

_words[i] = _newWord;

}

text = _words.join(” “);

setTextFormat(getTextFormat());

return (text);

}

}

}


the flash
the xml

<?xml version=“1.0” encoding=“UTF-8”?>


<content>

<page><![CDATA[

<pa>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam malesuada elit nec elit luctus aliquam. Nullam a purus ante, quis feugiat leo. Vivamus a quam suscipit tellus vehicula posuere at eu augue.</pa>

<pa class=”style1″>Suspendisse varius fermentum tellus, pharetra luctus velit imperdiet id. Vestibulum fermentum, lorem a facilisis fringilla, turpis est aliquam massa, vel accumsan urna augue vel orci.</pa>

<pa class=”style2″><span class=”ital”>Curabitur tellus quam</span>, pretium vitae commodo quis, ultricies ut velit. Praesent id quam non ante bibendum mattis. Aenean ut sem vitae arcu tincidunt dapibus at at arcu.</pa>

<pa>Integer ut erat nulla, placerat blandit quam. Vivamus id molestie ligula.</pa>

<pa>Curabitur tellus quam, pretium vitae commodo quis, ultricies ut velit. Praesent id quam non ante bibendum mattis. Aenean ut sem vitae arcu tincidunt dapibus at at arcu.</pa>

<pa class=”style2″><span class=”strong”>Fusce scelerisque </span><br/>turpis ac mauris sodales id dignissim enim lobortis. Sed aliquet, ligula non laoreet adipiscing, velit quam placerat quam, sit amet ultrices massa ante nec augue.</pa>

]]>

</page>

</content>

Posted 27. March 2013 by admin
Tags: , |

Leave a Reply

Required fields are marked *