I'm trying to break a specific word using css.
The word is "sales/telemarketing", and I'm trying to break the word after the "/tele" part. I'm trying to avoid using <br> as it might affect the way the layout for the paragraph tag.
Is there a way to break it using CSS?
I know you said you want to avoid <br>, but there is <wbr>..
jsfiddle demo
Example usage:
<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>
If you re-size the p, the word will break after tele.
See MDN
Sadly, there is limited support for <wbr>, as it isn't supported by IE10.
I just thought of a random CSS alternative..
jsFiddle demo
HTML
<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>
CSS
span {
margin-right:-4px;
}
Basically, you just include a space after tele, therefore it breaks to a new line.. By selecting the word tele, you can remove the space.. not ideal - but it works nonetheless.
You cannot specify a word division point in CSS (except in a contrived way, which would be just an unreliable emulation of the proper way). Instead, include a hyphenation hint, the soft hyphen, U+00AD, either by entering it directly if you know how to, or using the reference :
sales/telemarketing
You can add other hyphenation hints to the same word if you like. And you can add <wbr> after / to specify an allowed direct break point (no hyphen appears if the string is divided).
Related
I found this article about hanging punctuation:
http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890
and this link in the comments: http://dabblet.com/gist/9623025
It's a really nice idea, and it would be an awesome way to hang soft hyphens generated by some tool like Hyphenator or Hypher. I started playing around with Hypher and encapsulated the hyphens in a span...
Then I realized I don't know how to style soft hyphens.
This code should make an hyphen red, but of course the one in span is not breaking a word, so the browser doesn't show it:
<style>
.box{
width:40px;
background-color:yellow;
}
.hyphen{
color:red;
}
</style>
<div class="box">
<p>aaaabbbb<span class="hyphen"></span>cccc</p>
</div>
http://jsfiddle.net/5LazU/
Is there any way to do it?
It is somewhat unclear what the question is about, so I will address different interpretations of it.
The hyphens introduced by a browser’s automatic hyphenation (due to the use of the hyphens property) cannot be styled as separate entities (i.e., in a manner that differs from the style of the surrounding text), since they do not constitute elements or pseudo-elements.
Styling SOFT HYPHEN characters in HTML is a different issue, with browser-dependent answers. The answer does not depend on the method of entering SOFT HYPHEN (as a raw character vs. the reference vs. a numeric reference), since they result in the same data in the DOM: But it depends on wrapping the character in an element, as in the question.
The code in the question causes a red hyphen to be displayed on Firefox and on IE, but on Chrome, there is no hyphen after “bbbb”, so I guess the code was tested on Chrome. This appears to be a bug: the element is treated as allowing a direct line break without inserting a hyphen.
The issue of “hanging punctuation” is something completely different. The reason why hanging punctuation techniques word for quotation marks (which is what the linked documents contain) is that the marks appear at the start and at the end of a segment of text. Browser-inserted hyphens are different, and the key thing there is that the browser analyzes how many characters will fit on a line before it inserts a hyphen (due to automatic hyphenation or as a result of rendering SOFT HYPHEN as a visible hyphen). I don’t see how there could be a way to intercept this unless the browser provides an API for the purpose.
I have strange problems developing a site.
Any browser on my computer adds a spacing above some elements at the page (e.g. above the navbar, the dropdown in navbar, the container etc). In the Chrome Developer Tool it displays like having a strange text element (quotes with spacing):
but in source code it displays without it:
If I delete that quotes from the Tool, the spacing disappears.
That quotes (spacing) can't be added by Javascript or PHP: it exists ever it we comment all script includes and disable php preprocessing for .html files (example).
This spacing can't be added by CSS: e.g. for navbar we have rule:
.navbar {
margin-top: 0;
}
The spacing exists in all browsers at my computer (tested in Firefox, Chrome, IE 9).
Moreover, Firefox Dev Tool doesn't display any quotes:
but adds spacing in code in that places where are quotes in Chrome Dev Tool.
So, what's it? How to remove this spacing (I don't want to use ugly solutions like negative margin)?
Please comment do you have this problem on your machine? Thanks.
It seems to me, that the spaces are 'special spaces' like is one. They may look like a normal space character, even in a text editor
Look at the code, which generates the HTML structure.
Then delete the spaces in request. Put back the formating spaces by using the space bar key.
edit
looking closer in my text editor i realised, you have a special diacritical character in your code.
When you look a my screen from Notepad++ editor, there are small 'hooks' at the less than character (<) of the <nav> and the <li> tag which I marked red.
Don't just delete the spaces, delete the less than character (<) too and retype it using the keyboard.
The characters between the <body> and <nav> elements are a line feed and a BOM - Byte Order Mark (aka zero width non-breaking space) U+FEFF (EF BB BF in UTF-8). See the image below taken from Hex editor Neo
It's the BOM that you need to remove.
There is whitespace in your source HTML: between the <body> and <nav>. The only way to make it go away is by running the two tags together, as in
<body><nav class="..."> ... </nav></body>
HTML dictates that runs of whitespace outside of attribute values are treated as one single space, so it doesn't really matter how much whitespace there is, if it's newlines or not, etc. Even if you have a single space character in your HTML, a conformant browser has to treat it as a text node. It's these text nodes that Chrome hints to by showing the quotes.
I have a div that is too narrow to text-align:justify (gaps too wide), but yet looks un-uniform when right- or left-justified, because then there is a large gap at the end of lines. Left-justified looks best, but could I use hyphenation, like in books? Using CSS?
You can use hyphens: auto provided that you have declared the content language in HTML, e.g. using <html lang=en-US>.
Browser support is still limited but getting better, see
http://caniuse.com/css-hyphens
For good quality, you may need to manually control hyphenation e.g. by using soft hyphens () in words that might otherwise be hyphenated wrong.
Hyphenation is language-dependent; you can't just put overflowing characters on the next line and get the same effect that you do in books. Hyphenation rules are actually pretty complicated (see http://dictionary2.classic.reference.com/writing/styleguide/division.html), and the only way that you can do it properly (like in books) is either manually or via a client-side or server-side script; I'm pretty sure it can't be done using only css.
You might want to use something like http://code.google.com/p/hyphenator/
For hyphenation in html, there are javascript programs to add what's needed to the text. such as http://code.google.com/p/hyphenator/
Support for brower buildin hyphenation is unreliable and improvement in its support is doubtful.
I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code
<h2>
<span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br>
WEB DESIGN EXPERTS
</h2>
So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it.
Nope, not with CSS alone. :first-letter will only pick up the very first letter (and any punctuation marks), and you can't select or apply pseudo-elements to DOM text nodes with CSS.
You'll have to wrap that title in its own span, then select the :first-letter of that second span.
No. CSS applies to elements, not to text. If you still wish to edit text only, you'll need a language that is able to work with strings, such as Javascript or PHP.
Or use the selector #BoltClock suggested.
I'd do that.
True or not: We should always use proper capitalization and never put whole sentences in all-uppercase. If we must do so, we should use CSS for this task."
Should we use the CSS property text-transform for other cases if we need them?
(Note that I'm not talking about HTML tags, I’m talking about text content)
Links to read:
http://blog.mauveweb.co.uk/2009/01/14/dont-use-uppercase-in-html/
http://www.webaim.org/techniques/fonts/#caps
Huh? For normal text? That sounds like a ridiculous idea to me. Every language has its rules about what's lowercase and what's uppercase. Why would one want to divert from that?
Update: Sorry Jitendra, I didn't read your update closely. Now this
I head Screen reader spell letter by letter if we use UPPERCASE.
could well be - say, for USA to be spelled like U S A. I could imagine some screen readers do this. But this would only mean not to put words in ALL CAPS - which is a rule you would want to follow anyway.
Having all text in lowercase and uppercasing the right words through text-transform, you would have to put a CSS class on every word that needs to be capitalized - extremely cumbersome, would result in horribleHTML soup, and wouldn't make sense. Just use normal capitalization, and don't use all caps.
You should write content of a page with proper grammar, spelling, and capitalization just as you would in an essay. Navigation and logos should start with an Uppercase (or if it's a name, the proper spelling for the name, e.g. iPhone, not Iphone or IPhone.) Only use CSS capitalization for stylization. So, if you want your site's name to be in all caps (MY WEBSITE) use CSS to make it all caps, but in the HTML make sure it's proper (My Website).
Hope this helps!
It's generally a good idea to concentrate on what's easy for people to read. Almost always, for almost all sorts of information presentation, conventional typographic rules for the language of the site are appropriate, and you should not do anything different without having a really good reason.
The W3C states that all XHTML elements and attribute names should be in lowercase:
XHTML documents must use lower case
for all HTML element and attribute
names. This difference is necessary
because XML is case-sensitive e.g.
<li> and <LI> are different tags.
As for web page content in between tags, of course it is not necessary.
Jaws does not spell out words if they are recognized as English words. FOR EXAMPLE "THIS IS PRONOUNCED NORMALLY." sounds the same as "This is pronounces normally." When dealing with abbreviations capitalization matters. For example "usa" is pronounced phonetically as one syllable. “USA” is pronounced as “u s a” Made up words tend to be pronounced the same regardless of capitalization, for example “FDIOSUF” is pronounced the same as “Fdiosuf”
I'm not talking about HTML TAG i'm talking about text content? I head Screen reader spell letter by letter if we use UPPERCASE.
my question was "Should we always use lowercase text in web page's content?" and use css text-transform for other cases if we need.
Just use natural text, as you did in your SO question. Screen readers will generally read ALL UPPERCASE as individual letters, as such text is generally an acronym (it'll likely vary from reader to reader - some handle things more intelligently than others, and may be able to figure out that a whole sentence isn't likely to be an acronym).
You don't have to lowercase every letter, though - a screen reader shouldn't have any problem with "This Is A Sentence."
UPPERCASE text that isn't an acronym should be done with CSS's text-transform: uppercase;.
It has nothing to do with screen readers. For actual content, you should use normal capitalization. For element names and attributes, you must use lower case if you're using XHTML, because it's case-sensitive and the spec says the tag names and attribute names are lower case. These are two completely different things (content vs.markup).
Edit Re your edited question: You should avoid incorrect use of ALL UPPER CASE TEXT (that would be an example of incorrect use), because screen readers may well spell that out on the theory that it's an acronym like HTML or W3C. But not doing ALL CAPS is not the same as doing all lower case. Use initial capitals at the beginnings of sentences, etc. Don't use ALL CAPS for emphasis, use <em> (or <strong>, depending on the type of emphasis). Doing so marks up your text semantically, which actually helps the screen reader do its job (by allowing it to put emphasis where it should be put).
yes you should, if you would like to modify the text letters use the css property text-transform http://www.quackit.com/css/properties/css_text-transform.cfm