Add border around specific textfield copy? Multiple paragraphs, one needs outlined

[Bit_Crusher]

I have a textfield that is generated and populated via stylesheet + string.  The copy in the string is pretty lengthy and I have two paragraphs toward the end of the string that needs a black border.  Overall the different things I've tried to get some specific copy outlined doesn't work.  I can create a bit of a work around for getting the copy outlined, however it's positioned and since this is using HTML text the leading for the copy is based on the user's OS - so on a PC it is positioned fine, on a Mac, it's off by a great amount.

import TextField.StyleSheet;

var styles = new TextField.StyleSheet();

styles.parseCSS(css);

styles.setStyle("body", {fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000'});

styles.setStyle("h1",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#7a68ae', fontWeight:'bold'});

styles.setStyle("bbw",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000', marginLeft:'8px', marginRight:'8px', fontWeight:'bold'});  // tried adding borderStyle here, no luck

styles.setStyle("indent",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000', marginLeft:'12'});

styles.setStyle("li",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000'});

styles.setStyle("a",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#2C65A9', textDecoration:'underline', fontWeight:'bold'});

var copy:String = "Lorem ipsum dolor sit amet, elementum velit vel, urna facilisis amet, velit nec auctor debitis sit arcu, quis lectus, amet lacus arcu magna nec at aliquam. Posuere vel molestie vitae wisi. Felis pretium, sit sollicitudin lacus est id mauris, ut donec et elementum, justo et. Sit turpis in, urna malesuada consequat nunc malesuada nam. Praesent hendrerit erat. Fringilla iaculis lacinia convallis mattis erat mauris, tellus sapien purus accumsan pede amet at, mauris nunc nec magna sit eleifend, pede ultrices felis tincidunt. Magna tellus wisi, in nec lacinia voluptatem. Justo fringilla gravida ligula aute lacus metus. Quisque feugiat elit accumsan tincidunt quis, mauris nulla orci sapien metus convallis potenti, dignissim porta praesent commodo donec placerat."

+ "<br>Ut nascetur et non quam condimentum, vulputate tristique varius erat id nunc feugiat, eget fusce sed, eget dolor nonummy hymenaeos, viverra maecenas. Ullamcorper porttitor gravida nulla ornare ultrices, mauris convallis enim ultricies rhoncus quisque nunc, varius quisque interdum, aptent ornare rutrum, et quisque accumsan. Libero pede urna consectetuer non, luctus odio curabitur justo arcu quis suspendisse, pede ut vestibulum. Dui suspendisse fusce ad sit, tempora euismod nec, in eu interdum elit mauris vehicula amet, turpis consectetuer dolor augue praesent lorem. Wisi etiam scelerisque, consequat cillum sed magnis. Vitae in metus risus ipsum sed massa, tristique est hendrerit, lacus egestas enim etiam mauris, et aliquet faucibus montes neque vel hendrerit. Odio suscipit. Justo arcu lacinia cras, tellus sapien dolor molestie, arcu vestibulum, amet tristique tempor pulvinar nec, id cras vel."

+ "<br><bbw>Dolor donec, sapien habitasse libero ipsum sed, nulla sed consectetuer massa ut, augue erat felis lacus officia. Consectetuer cras sapien, fusce et at quis fusce orci rutrum, sapien sit, occaecat cum sagittis tincidunt lacinia felis, ante facilisis quam proin ipsum tellus. Nunc consequat malesuada in, eros dui leo. Adipiscing commodo mi, placerat sit praesent dolor adipisicing, et porttitor a eget eget sed, nulla malesuada quis lectus nam. Phasellus accumsan in quam maiores eu penatibus. Vivamus potenti nec luctus faucibus. Ipsum illum magna velit eget eu, fringilla dis pretium in augue vehicula vestibulum, pede rhoncus vitae consectetuer vel nunc pede. Lobortis imperdiet augue risus, velit tempor eu, voluptas nunc nulla vitae felis. Non lorem in magna tincidunt arcu id, sed ipsum eu purus ultricies faucibus, ut fermentum dictum in cras in, risus vestibulum a neque quam. Aliquam bibendum eu proin elit cursus, per bibendum. Mauris sapien sit adipiscing non sit molestie, augue quis, sit mauris eros wisi, nibh dolor, sit proin sed sit eum.</bbw>"

+ "<br>Mauris tortor vestibulum phasellus malesuada quam neque, a consectetuer ante nulla eget sed est, nihil in congue proin lectus rhoncus praesentium. Fringilla malesuada imperdiet phasellus urna integer. Volutpat et justo adipiscing proin, enim cras suspendisse elementum, at aliquam similique hymenaeos donec phasellus, lorem dui gravida tempor, magna ante sed libero dui. Semper quis justo, platea libero. Id pellentesque donec varius interdum neque, sed sapien vel cubilia, nostra fermentum dictumst cum dui vitae nunc, risus nunc urna eu, suscipit urna adipiscing error lorem ut commodo. Nec eget consequat, maecenas at, quis rerum, faucibus tempus hendrerit duis. Tortor dictum nulla dictumst eros doloribus commodo. Eros volutpat nullam mauris justo, auctor mus, ut et, ipsum at arcu lectus convallis turpis sollicitudin. Quam eu vel, sed curabitur, et eget in aliquam. Vestibulum lectus, mi nec, gravida mauris proin libero, sit justo convallis voluptates ligula ridiculus.";

copyLoad();

function copyLoad(){

          var copyContent:TextField = isiMC.scroll_content.createTextField("copyContent", this.getNextHighestDepth(), 0, 0, 260, 20);

  copy_holder.copyContent.multiline = true;

          copy_holder.copyContent.selectable = false;

          copy_holder.copyContent.wordWrap = true;

          copy_holder.copyContent.styleSheet = styles;

          //isiMC.scroll_content.copyContent.border=true;

  copy_holder.copyContent.html = true;

          copy_holder.copyContent.htmlText = isi;

          copy_holder.copyContent.autoSize=true;

          copy_holder.copyContent.antiAliasType = "advanced";

  copy_holder.copyContent.gridFitType = "pixel";

          copy_holder.copyContent.sharpness = 800;

};

so there's no problem with this working, however the third paragraph (for example) using <bbw></bbw> needs a black outline around the paragraph.  copyContent has the option for receiving a border, but there doesn't seem to be a way of adding in a style for a border.  Not certain if there's a way to concatenate this so that I could have, say, three textFields (no border + border + no border for the last paragraph)

any tips, suggestions or solutions would be greatly appreciated!

[kglad]

put the paragraphs that need a border into separate textfields and enable the border property of those textfields.

[Bit_Crusher]

What I run into when doing separate textareas is the copy stacks versus flowing.  Rather than the paragraphs showing in order, the third with the outline is overlaid on the first.  Normally I would default to positioning this however this cannot happen due to the OS issues I mentioned above.

I'm not 100% certain as to how I could (for lack of a better term) stack the textareas so that the copy flows as it would if it was all part of the same string.

[kglad · Accepted solution]

first, all your textfields should be multiline and wordwrap enabled and autoSize assigned to true.

then, you can assign the text to your three textfields and position your textfields.  for example,

var paragraphLeading:int=10;  // assign this to meet your needs.

var copyA:Array=copy.split("<br>");

tf1.htmlText=copyA[0];

tf2.htmlText=copyA[1];

tf3.htmlText=copyA[2];

tf2.y=tf1.y+tf1.height+paragraphLeading;

tf3.y=tf2.y+tf2.height+paragraphLeading;

[Bit_Crusher]

Thanks - that put me on more of the right path to what needed to be worked out.  main problem  I ran into was the height of the first block of copy (length was nearly at 10K).  Also running into odd style problems, but at least all of the paragraphs that need to be set are in the right position!

[kglad]

you're welcome.

[Bit_Crusher]

One final question that you might be able to help with that is causing my hair to fall out.  or what little is left.

With the text fields + htmlText there are times where I need to utilize non-standard fonts, especially Super / Subscript fonts ala GG Superscript / Subscript TTF.  Naturally compiling it looks great on my machine, once uploaded to a server and viewed by someone without the fonts there's no superscripting.

I have the fonts in the library, embedded all of the characters, named and set for export in first frame / actionscript.

After that I've pretty much tried everything =

var Superscript:TextFormat = new TextFormat();

          Superscript.font = "Superscript";

textFieldName.setTextFormat(Superscript);

In the text it would be "....<font face='Superscript'>\u00ae</font>..."

So I'm not 100% sure why the superscript isn't embedding.  Possibly from having a stylesheet utillized?  Even with setting this in the stylesheet code =

stylesEnd.setStyle("super",{fontFamily:'Superscript', fontSize:'11px', color:'#000000'});

for example, it'll look nice locally, no superscripting on a server.

any insight into this madness?   Thanks!!!!!!!!!!!!!!

[kglad]

embed your needed fonts in the library and assign linkage ids by right clicking the font, clicking properties, and ticking export for actionscript.

use the linkage id in your stylesheet's font-family attribute.

[Bit_Crusher]

Right, as menteioned above I already did that.  The font is showing in the library, all of the characters are embedded.  Linkage was previously checked for "Export for Actionscript" and "Export in frame 1".

in the stylesheet I have (for example)

stylesBB.setStyle("super",{fontFamily:'Superscript', fontSize:'11px', color:'#000000'});

stylesBB.setStyle("subber",{fontFamily:'Subscript', fontSize:'11px', color:'#000000'});

and...

var copyContentBB:TextField = createTextField("copyContentBB", 1, 0, 0, 125, 20);

copyContentBB.multiline = true;

copyContentBB.selectable = false;

copyContentBB.wordWrap = true;

copyContentBB.styleSheet = stylesBB;

copyContentBB.border=true;

copyContentBB.html = true;

copyContentBB.htmlText = copyBB;

copyContentBB.autoSize=true;

copyContentBB.antiAliasType = "advanced";

copyContentBB.gridFitType = "subpixel";

for the text field.  I threw up an example here http://www.oneman-press.com/temp/flash/ --> so on my computer this looks dandy.  When someone else checks it out, the (supposedly) embedded super / subscript font do not render.

[kglad]

attach a screenshot showing your fonts in your library and showing the linkage id column.

[Bit_Crusher]

Hope that helps!

[kglad]

that looks good.  now, you just need to enable the embedFonts property of your textfield and use your stylesheet attributes correctly.

[Bit_Crusher]

I had tried that - the result was that the CSS that used fontFamily:'Arial,Helvetica,sans-serif' dropped out (i.e. the superscript / subscript font was embedded, no other copy shows). 

styles.setStyle("body", {fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000', leading:'-3px;'});

styles.setStyle("copy", {fontFamily:'Arial,Helvetica,sans-serif', fontSize:'11px', color:'#000000', leading:'-3px;'});

styles.setStyle("h1",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'9px', color:'#3870B7', fontWeight:'bold'});

styles.setStyle("li",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'9px', color:'#000000'});

styles.setStyle("super",{fontFamily:'Superscript', fontSize:'12px', color:'#000000'});

styles.setStyle("sub",{fontFamily:'Subscript', fontSize:'12px', color:'#000000'});

styles.setStyle("subBul",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'9px', marginLeft:'38px'});

styles.setStyle("subBulPad",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'9px', marginLeft:'48px'});

styles.setStyle("a",{fontFamily:'Arial,Helvetica,sans-serif', fontSize:'9px', color:'#424FA5', textDecoration:'underline', fontWeight:'bold'});

Those fonts are standard on all machines, so no need to embed this.  I did some searching yesterday to see if there was a way of using embedFonts for a specific font, however that seems to be an overall text field option.

totally flumoxed on this one!

[kglad]

you need to embed all fonts that you want to use.  one textfield can't use both embedded and not embedded fonts.

[Bit_Crusher]

So embedding all fonts worked out pretty well. I had to mess around with the settings for the antialiasing to make it look nice, one really odd thing that I'm running into is the spacing on the super / subscripts.  I've refreshed the page here http://www.oneman-press.com/temp/flash/  and nothing seems to be working with killing the space to the left of the reg mark or the subscripted numerals. 

[kglad]

reduce the letterSpacing for the superscript font.