this is a posible duplicate of: Rangy: Adding multiple highlights for the same piece of text
But this question got no answers.
The problem is that the Rangy API puts a lot of span tags when applying a class in an element that already had a class placed by Rangy, such as color or background-color.
i.e:
<p><span class="redBackground">texto de ejemplo para probar rangy</span></p>
becomes (when i apply other background colors):
<p><span class="redBackground">text</span><span class="blueBackground">o de ejemplo</span><span class="orangeBackground"> para proba</span><span class="orangeBackground">r ran</span><span class="redBackground">gy</span></p>
in the case of "orangeBackground" class, i dont see the reason of having multiple spans, is it possible to force Rangy not to place so many spans?
Related
I have to create a primary heading component, below is my markup along with CSS classes. I'm following BEM naming convention for class name.
I have h1 element consists of two spans. One span for main heading text, and second span for sub heading text. The main and sub are variations of my heading.
I have not specified the Element class (Which could be heading-primary__text ) and i have directly attached modifier classes to span elements.
<h1 class="heading-primary">
<span class="heading-primary--main">Video Background Option</span>
<span class="heading-primary--sub">One Page Parallax</span>
</h1>
Is that a right way to follow BEM methodology without specifying Elements classes & attaching Block's modifiers classes to Elements(span)? Because i don't need elements classes.
Is there any alternate?
While this is subjective, and as per the convinience of the project . i'd recommend doing something like this- as you already have a header-primary_text element class
<h1 class="heading-primary">
<span class="heading-primary_text">Video Background Option</span>
<!--create a modifier -->
<span class="heading-primary_text--sub">One Page Parallax</span>
</h1>
In this way you can make the sub a modifier class for the subtext.
More info can be seen here https://en.bem.info/methodology/quick-start/#modifier
Hope this helps :)
I think there is a much simpler way to do this just using basic HTML. You only want to have one h1 per page and since you said that your second span of your h1 is a "subheading" I feel like you would be way better off marking that one as an h2 instead of two spans of different context within one h1 heading! Always good to use the built in benefits of HTML first if you can.
No, it is not the right way. You cannot use block (or element) modifier alone on the HTML tag without specifying the block (or element) class itself.
Please refer to BEM documentation here: https://en.bem.info/methodology/quick-start/#modifier
A modifier can't be used alone From the BEM perspective, a modifier
can't be used in isolation from the modified block or element. A
modifier should change the appearance, behavior, or state of the
entity, not replace it.
Here is a code example from the docs:
<!-- Correct. The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
<!-- Incorrect. The modified class `search-form` is missing -->
<form class="search-form_theme_islands">
<input class="search-form__input">
<button class="search-form__button">Search</button>
</form>
You mentioned that you don't need an element class, this topic is also covered in BEM docs
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-modifier-and-element-names
semuzaboi's suggestion sounds as a good alternative to me.
First of all, elements are specified after two __ like block__element_modifier.
Secondly, yes. Blocks may not have any elemenets inside, but rather have modifiers (most common case a block with lang modifiers for Internationalization (block_lang_ru))
PS as well as element may not have any modifiers inside. But block can not be nested inside another one. They should be placed inside one directory on the same level.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been trying to align the P tag text left and right next to each other but can't get it to do so. They are both within the same divs and I'm coding in ems and % could anyone help?
You should use span instead of p which has a default display of inline
<span>Your text here</span>
The p element is default display block. If you insist on using p, then you need to dive into some CSS. Set a class for the p element (or ID if it is unique) like so
<p class="inline-p">Your text here </p>
Then in a separate CSS file, use a selector to reference that class. Please try to avoid inline CSS in your HTML. It can become a nightmare to maintain later.
.inline-p {
// Modify display for this class
display: inline;
}
You should avoid modifying the properties of HTML tags when there is an existing HTML tag that can accomplish what you are looking to do. Nevertheless, both your options are presented here. Good luck with your website.
make display:inline; for p tag
You can't align text left and right in the same p tag unless you use span. But you could do it using the CSS float property
<p style="float: left">Some text on the left</p>
<p style="float: right">Some text on the right</p>
You haven't posted any code for us to analyze, so speaking generally... you can mess with the "display" CSS style and floats to get them lined up as you need, or you could use a more appropriate tag that is already inline, like a span.
I am trying to learn fundamentals of html and markings.
I want to create an anchor which containes two lines of information.
first line: the name of the link
second line: short explanation
e.g.
<a href='#'>
<span>Studies</span>
<span class="alt">-Information about studies</span>
</a>
Is this correct?
How should the following (2nd span) be modified if necessary?
Thank you
PS. Both lines need to be surrounded with span for css-styling.
First off, don't rule out using a br tag. This is a semantically-appropriate place for a br tag (forcing a hard break inside a line or paragraph of text). Plus, if you use a br tag, it may no longer be necessary to put either of the two lines of text in separate tags, unless you want to style them differently.
<a href='#'>
Studies<br/>
-Information about studies
</a>
Second, try viewing the HTML with stylesheets disabled (I do this in Firefox by pressing ctrl-shift-S, with a little help from the Web Developer extension). Is the browser able to render the content in an easy-to-read way based solely on the HTML provided? To some extent, the more readable the "unstyled" content appears, the more semantically-correct the HTML is.
Given that the second line of text seems to be secondary to the first line (a subtitle, not as important, possibly redundant or not entirely essential), putting the first line in a strong tag or putting the second line in a small tag are a couple ways to establish the relative importance of the two lines, if you wish to do so.
<a href='#'>
<strong>Studies</strong><br/>
-Information about studies
</a>
<a href='#'>
Studies<br/>
<small>-Information about studies</small>
</a>
There's some room for personal preference here. These are just two approaches.
It may be a little bit of a stretch using a small tag in a case like this, but it's not entirely inappropriate. A small tag is typically used for "fine print", attribution, disclaimers, or side comments. It doesn't semantically mean the text is small, but it does tend to be used for content that's secondary to something else (that clarifies something else). It should though only be used for text that's short in length.
And a strong tag doesn't have to be styled bold. In fact, that's the whole point of semantic markup: It doesn't specify or imply how the content will be styled; all it does is offer a hint to the meaning or context of the content. A strong tag can reasonably be given a style of font-weight:normal.
In order to achieve that those are in separate lines, try using the <div> tag instead. You can still specify a class for styling, the only difference is that <div>s are block-elements; each of them is rendered on a separate line. Here's the modified version of your code:
<a href='#'>
Studies
<div class="alt">-Information about studies</div>
</a>
Another, slightly more preferable way of doing that is by styling the elements to be block-elements. That can be used by setting the CSS display property to block. Something like:
<a href='#'>
Studies
<span class = "alt block">-Information about studies</span>
</a>
(Note that class = "alt block" means the element has both classes alt and block, and note also that the first <span> is removed because there's no need to style that node with anything).
CSS:
.block {
display: block;
}
Hope that helped you!
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
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.