Is it possible to transform a phrase to plural using just CSS, based on the number within the element?
I'm guessing this breaks a presentation/data separation boundary philosophy, but just wondering if it's possible. It's easy with JavaScript, but wondering if CSS can take care of it.
<span class="plural">0 book</span>
outputs: 0 books
<span class="plural">1 book</span>
outputs: 1 book
<span class="plural">2 book</span>
outputs: 2 books
No. CSS cannot read the content of the element to determine what number it is, and CSS doesn't have if conditions.
If you would only apply .plural to items that should be regularly pluralized, you could do:
.plural:after {content: "s"}
But then we run into the problem of how English is irregular, and not all plurals are guaranteed to end in "s".
Going to try answer this myself, as it seems a pure CSS solution is not possible. I've found a small workaround here that works for me. It's not ideal, but may work for others too..
I just render the number behind the plural class name and wrap this around the s. Then I use a class for plural1 that hides the s.
This works for me because I use templates to render my html and it's easy to slot the numbers in.
.plural1 {
display: none;
}
<div>-1 book<span class="plural-1">s</span>
</div>
<div>0 book<span class="plural0">s</span>
</div>
<div>1 book<span class="plural1">s</span>
</div>
<div>2 book<span class="plural2">s</span>
</div>
Pros: This can work for other endings and other languages too. Negative numbers are supported.
Cons: Adds unused classes to your elements (plural2, plural3, etc.) that the browser will need to read and ignore. Not really an issue for a small number of object though (eg. 100).
Related
I have the following HTML code, I tend to have a 3 code project identifier at the start
<span class="abc-user-overview__header__title">
<span class="abc-user-overview__header__title__name">
{{ name }}
<span class="abc-user-overview__header__active">true</span>
</span>
Although the 'name' element is a child of title, how strict does the naming convention have to be? As I think abc-user-overview__header__title__name is too long and would prefer to drop the __title, giving me:
<span class="abc-user-overview__header__title">
<span class="abc-user-overview__header__name">
{{ name }}
<span class="abc-user-overview__header__active"true</span>
</span>
Is this valid and acceptable BEM?
Sadly your code is not valid according to BEM convention. This is the official name structure block-name__elem-name_mod-name_mod-val.
Here is your code with valid BEM naming:
<span class="abc-user-overview__title">
<span class="abc-user-overview__name">{{ name }}</span>
<span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>
Few tips:
Avoid naming your blocks according to their content. Try to be generic for blocks that can be reused. For example, let us have a block that represents a list content. On one of the pages we may display News .news-list, but on other we may display Products, so reusing block with name .news-list with Products inside isnt very nice. In this case a simple class like .list will be enough.
If something can be reused, make it block, not an element.
For boolean modifiers, the value is not included in the name.
Full documentation and great examples can be found in the official website: https://en.bem.info/methodology/naming-convention/#naming-rules
Those names aren't too long. Sometimes when names get too long it's because you've got too much going on in that page. When I see that in angular (for example) I consider extracting components, then you can chop off the block and half the element name from the existing css classes and replace with a shorter block name. it makes the parent component so much easier to read when you move a lot of unrelated complexity to a different component. Good candidates for this could include
mobile menus
containers (anything with responsive widths, padding or icons to collapse or expand some region)
footers
complicated widgets that show some stats
any repeated card with a title, photo, description and hyperlink.
Some of these components might be useful for the whole application, or maybe just for that page. Etc.
The html attribute dir and the css text-align property acheive the same result. E.g. consider the two cases:
dir="rtl"
<p dir="rtl">
one two.
</p>
text-align: right
<p style="text-align: right;">
one two.
</p>
The only difference between these two results is the placement of dot. Why isn't <p dir="rtl"> one two. </p> translated to .owt eno? If it can't then what is the use of dir attribute at all?
The placement of the dot is the crucial point of the difference between dir and text-align. Handling right to left scripts is much more involved than handling the alignment of the text. To understand better, read
https://www.w3.org/International/articles/inline-bidi-markup/uba-basics
A sequence of rtl characters such as سلسلة نصية الذهاب works automatically because of the Unicode bidirectional algorithm relying on the character's directional properties, but you need more to properly handle punctuation, images, and bidirectional text.
bdi is an element, not an attribute name.
don't get bdi confused with bdo. The former applies heuristics to guess the direction of text, the latter overrides the bidirectional algorithm (and is very rarely used).
For a more complete picture about how to work with RTL (or actually bidirectional) text in html, see
https://www.w3.org/International/tutorials/bidi-xhtml/index
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!
I found many different views on many articles on presentation tags, with some people thinking all tags are presentational, but some others do not think so.
For example: in the HTML 5 specification, they do not think <small> is presentational.
In this list of tags - which are all HTML 5 supported - which tag is presentational and which is not?
<abbr>
<address>
<area>
<b>
<bdo>
<blockquote>
<br>
<button>
<cite>
<dd>
<del>
<dfn>
<dl>
<dt>
<em>
<hr>
<i>
<ins>
<kbd>
<map>
<menu>
<pre>
<q>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<var>
Who decides which HTML tag is presentational and Which is not - and how do they make that decision? Is it a particularly large group such as the W3C or is it based on groups of web developers, i.e. the web community? Also, between the two, which advice we should follow for deciding which tags are presentational?
If a tag is valid as according to the W3C in accepted doctypes, then what are the pros to not using any xhtml tag from any point of view?
in user/usability/accessibility point of view
if we use more HTML tags then pages without CSS will better.
in developer point of view
if we make use of more available tags in HTML, than we do not need to use <span class=className">
it takes more time to write and it uses more charter space than tags in HTML and CSS both.
For example:
instead of using:
<span class="boldtext">Some text<span>
.boldtext {font-weight:700}
We can use:
<b>Some text<b>
b {font-weight:700}
it looks cleaner, it is easier to use , it uses less characters - which will reduce the page size - and it is more readable in source. It also does not break the rule of content and presentation separation.
We can also do this:
<b class="important">Some text<b>
b.important {font-weight:700}
and whenever we want to change font-weight then we can change css only in both examples.
If a tag is considered valid by w3c in their recognized doctypes, then what are the pros to not using any X/HTML presentational tags which are not directly recognized by either the W3C, or by the HTML specifications?
Can we change any design parameters without changing anything in HTML? Does this fit within the meme of content and presentation separation?
If any HTML tag breaks the rule of separation, then does not the css property Content break as well?
see this article.
Why are the HEIGHT and WIDTH attributes for the IMG element permitted?. does it not break the rule of separation? A good debate on this matter can be found here.
W3C decides the semantics of tags. The specification documents of HTML5 gives conditions on the use of the various tags.
HTML5
To continue with your example, there is nothing wrong with using <b> to bold some text unless:
The text being bolded is a single entity already represented by a tag:
Incorrect:
<label for="name"><b>Name:</b></label>
Correct: (Use CSS to style the element)
label { font-weight: bold; }
<label for="name">Name:</label>
The text is being bolded to put added emphasis and weight on a section or words of a block of text.
Incorrect:
<p>HTML has been created to <b>semantically</b> represent documents.</p>
Correct: (Use <strong>)
<p>HTML has been created to <strong>semantically</strong> represent documents.</p>
The following is an example of proper use of the <b> tag:
Correct:
<p>You may <b>logout</b> at any time.</p>
I realize that there doesn't seem to be a lot of difference between the above example and the one using <strong> as the proper example. To simply explain it, the word semantically plays an important role in the sentence and its emphasis is being strengthened by bold font, while logout is simply bolded for presentation purposes.
The following would be an improper usage.
Incorrect:
<p><b>Warning:</b> Following the procedure described below may irreparably damage your equipment.</p>
Correct: (This is used to add strong emphasis, therefore use <strong>)
<p><strong>Warning:</strong> Following the procedure described below may irreparably damage your equipment.</p>
Using <span class="bold"> is markup-smell and simply shouldn't be allowed. The <span> element is used to apply style on inline elements when a generic presentation tag (ie.: <b> doesn't apply) For example to make some text green:
Incorrect:
<p>You will also be happy to know <span class="bold">ACME Corp</span> is a <span class="eco-green">certified green</span> company.</p>
Correct: (Explanation below)
<p>You will also be happy to know <b>ACME Corp</b> is a <em class="eco-green">certified green</em> company.</p>
The reason here why you would want to use <em> as opposed to <span> for the word green is because the color green here is used to add emphasis on the fact that ACME Corp is a certified green company.
The following would be a good example of the use of a <span> tag:
Correct:
<p>You may press <kbd>CTRL+G</hbd> at any time to change your pen color to <span class="pen-green">green</span>.</p>
In this example, the word green is styled in green simply to reflect the color, not to add any emphasis (<em>) or strong emphasis (<strong>).
The whole distinction between "presentation" elements versus "structure" element is, in my opinion, a matter of common sense, not something defined by W3C or anyone else. :-P
An element that describes what its content is (as opposed to how it should look) is a structure element. Everything else is, by definition, not structural, and therefore a presentation element.
Now, I'll answer the second part of your post. I understand this is a contentious topic, but I'll speak my mind anyway.
Well-made HTML should not concern itself with how it should look. That's the job of the stylesheet. The reason it should leave it to the stylesheet, is so you can deliver one stylesheet for desktop computers, another one for netbooks, smartphones, "dumbphones" (for lack of a better term), Kindles, and (if you care about accessibility, and you should) screen readers.
By using presentation markup in your HTML, you force a certain "look" across all these different types of media, removing the ability of the designer to choose a look that works best for such devices. This is micromanagement of the worst sort, and designers will hate you for it. :-)
To use your example, instead of using <b>, you should ask yourself what the boldness is supposed to express. If you're trying to express a section title, use one of the header tags (<h1> through <h6>). If you're trying to express strong emphasis, use <strong>. You get the idea. Express the what, not the how; leave the how to the stylesheet designers.
</soapbox>
It's not that presentational elements should be avoided, it's that markup should be as semantic as possible. When designing a document structure, default styling should be considered a secondary affect. If an element is used solely for presentation, it's not semantic, no matter what element is used.
The example usage of <b> isn't semantic, because <b> imparts no meaning. <span class="boldtext"> also isn't semantic. As such, their usage is mixing presentation into the structure.
This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.
I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.
<DIV id="col1">
<!-- I want to display everything with 'women' here -->
</DIV>
<DIV id="col2">
<!-- I want to display everything with 'men' here -->
</DIV>
<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
<DIV class="women">
Women's product 1
</DIV>
<DIV class="men">
Men's product 1
</DIV>
<DIV class="men">
Men's product 2
</DIV>
</DIV>
Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.
So I have two columns - or areas on the page - whatever - doesn't matter for this.
I want to use css to take everything under .products.women and put it in column 1.
I want to use css to take everything under .products.men and put it in column 2.
How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.
Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :
I dont want to maintain 2 identical for loops - nor move that logic elsewhere
I want to make an 'iphone' friendly version and i figure this will make that easier.
You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.
This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.
CSS it's a language used to describe the presentation of the (existing) content. You are
asking for programaticaly DUPLICATE or COPY some of that content.
You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.
Actually javascript seems to fit your scenario.
EDIT: you have a similar previous question here: using css to duplicate html elements
Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...