Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.
e.g. I have a label
I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).
So, the question in a nutshell is: Is there a flex equivalent of the following HTML?
<p class="english">bro<span class="highlight">th</span>er</p>
If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?
Thanks to anyone who can help!
Dan
yes, try the following
var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';
Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.
<mx:Label>
<mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>
The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :
Paragraph tag
The <p> tag creates a new paragraph.
The text field must be set to be a multiline text field to use this tag.
The <p> tag supports the following attributes:
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Span tag
The <span> tag is available only for use with CSS text styles.
It supports the following attribute:
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Ultimately, there are quite a few ways to do what you want.
Related
I have this:
<asp:localize id="locPopupInfo" runat="server" meta:resourcekey="locPopupInfoRc1"
text="Select up to 8 cameras to include." enableviewstate="false"></asp:localize>
I want to make the text be italic.
I tried adding style="font-style:italic" and style="font:italic". I also tried adding a css:
.italic-text{
font-style:italic;
}
Then doing cssclass="italic-text" and class="italic-text".
None of these worked. Is there any way to do this with asp:Localize?
Localize control inherits from Literal control. It does not output any markup itself, just the content in localized manner. Here is what MSDN says about it:
Although the Label control allows you to apply a style to the displayed text, the Localize control does not.
If you want to apply the style nevertheless, here are the options:
Switch to Label or similar control
Wrap in some server-side control, say Panel, and apply styling to it
Or wrap Localize in a client side tag with style applied. If you are very specific about italic style, you can just do <i><asp:Localize ...></i>
Put your localize into a span and then apply style class onto the span
<span class="italic-text">
Your localze stuff ....
</span>
To understand localize see this
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.
Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.
It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.
<div id="fake_textarea" contenteditable></div>
The scrollbars can be reproduced with the CSS overflow property.
You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):
<input type="hidden" id="fake_textarea_content" name="foobar">
...
$('#your_form').submit(function()
{
$('#fake_textarea_content').val($('#fake_textarea').html());
});
You Can't style the content of a text area separately, you have to use <div>s, or something similar.
Do you Want Something like this:?
http://jsfiddle.net/mekwall/XNkDx/
$('.editable').each(function(){
this.contentEditable = true;
});
This allows you to edit the content of a div, and it will still look like a textarea,
Bold will now Work.
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Another way to submit the "fake" text area is including the following lines inside the form tag
<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
If I put in a new tag eg:
<p>lorem ipsem blah blah blah <p class="special-colour">special phrase</p><p> lorem ipsem blah blah blah</p>
I get linefeeds which is not what I want.
Also do I need to explicitly return to the style that I was using or will it be assumed unless overridden by the class="foo-bar" attribute?
I realise that question probably goes to specificity which I'm yet to get on top of, since I don't really know what hierarchies naturally exist in HTML/CSS documents, I'm just wading into it all ATM.
Use a <span>:
<p>first part <span class="special-colour">special phrase</span><p> next part</p>
it's an "inline" element so will not cause a line feed.
And yes, the next part text will automatically "revert" to the style applied to the p element.
Your css for the span would be something like:
span.special-colour {
color: #ff7766;
}
Also, I can tell you are a UK-English speaker - be very careful with your use of color vs. colour !
Instead of
<p class="special-colour">`special phrase</p>
use
<span class="special-colour">special phrase</span>
The span tag is rendered in-line with no line breaks.
Since you tagged this question as html-email. The only way to get it working would be to create a table with say 3 columns, Put the respective content in the three columns and then style the each td of the table giving the inline-css. There is no way you can achieve this in any other way.
Exernal CSS never works for html-emails.
You can use <span> (possibly with a class, or you can define a general rule for all spans contained in a paragraph). You could also use <strong> or <em> if you want to give the word or phrase more weight or added importance, for example it is the main subject of the page. There is also <i> and <b> as well that can be used.
http://html5doctor.com/i-b-em-strong-element/ has more information about when to use each
Lets say I want to display tool tips for links using the title attribute:
<a class="editcommand" title="Edit" ...>
Is there a way to specify the title text for all elements of the same class using CSS, so I don't have to repeat it within each element?
CSS is only for the content of the style="" attribute, not other HTML tags. This sounds like a job for Javascript. If you're using jQuery here's an example:
$('a').attr('title', 'My universal title');
Unfortunately, no, CSS does not provide that ability. Since title is an HTML attribute (besides the <title> element of course), it's up to the markup structure (DOM) to define it, not the style (CSS).
With JavaScript it's just a matter of attaching the attribute to a set of DOM elements with that class. But again, that's modifying the DOM elements themselves, not their style properties.