Is it possible to disable the automatic addition of spaces after colons in CSS?
Related
I have an issue with WYSIWYG editors like TinyMCE or CKEditor that they does not format line-height intuitively like standard text editors.
When changing the font-size in WordPad, Google Docs or any standard text editor, the line-height always matches a line font-size and not the just a font-size of it's wrapper block:
Expected behaviour - Google Docs:
Unfortunately, TinyMCE or CKEditor are too simplistic in this area so they set the font-size by wrapping the selected text into inline span. And inline elements cannot have different line-height set.
While I understand the requirement of a clean code, the result is not what a regular user expects.
Wrong behaviour - TinyMCE
Wrong behaviour - CKEditor
My clients are rightly surprised that such basic feature is not implemented by default and we need to dig into editor's JS code to achieve the correct line-height formatting.
Any solution to fix it?
In Farsi, Arabic and some other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). The problem this causes is that sometimes the whitespace will cause half a word to wrap over to the next line.
This is totally incorrect, but I don't want to disable the whole wrapping style of the paragraph. In Microsoft Word, this problem is dealt by pressing ctrl+shift+space. This enters a different white space between the letters that doesn't wrap. How would I achieve something similar in HTML and CSS?
Here's a jsFiddle example: https://jsfiddle.net/gb0p72b2/.
You are looking for a non-breaking space character. In MS Word, ctrl+shift+space inserts a non-breaking space character. To do that in HTML use this instead of the normal white-space. Check out the JSFiddler: https://jsfiddle.net/6k0p9h5k/
Not sure without a real arabic page to test on, but CSS word-wrap: normal on the li elements might help.
The first three divs (in green, yellow and red) in this example are inline and have a whitespace in between them. However, looking at firebug's Style inspect and toggling on Show User Agent Css does not show any css that renders these whitespaces. Why?
Firebug version: 1.10.6
Firefox version: 16.0.2
Because the whitespace comes from HTML, not CSS, in the form of newlines between your closing and opening tags.
The fact that your first three elements are displayed inline is what allows the whitespace between them in your HTML to flow along with them inline, as if the blocks themselves were part of the text. What the browser does is turn the newlines in your HTML into regular space characters when rendering it, so you see them all on a single line as a result.
Because there is no parent element. Inline elements need a parent-block-element to stay in.
There are CSS-Properties like text-space-collapse: discard; but they don't work for your problem. To see your whitespaces i recommend the use of the Internet Explorer Developer tools. They are great, because they show you these layout-busters.
Question:
I want to create a hyperlink with both text and a leading or trailing icon. This can be accomplished in at least two ways:
With CSS setting a background-image property
By creating a ASP.NET Html helper that generates an anchor tag followed by an image tag.
Are there more?
I'm guessing this is a problem that has been solved a million times, and there might be a best practice. I see negative and positive sides of both approaches, and I'd like some input from you guys.
Metaquestion:
Both here and on programmes.stackexchange I get the warning "your question appears subjective and is likely to be closed". Where do one ask subjective questions nowadays?
Is the icon content? i.e. does it add (not duplicate) meaning to the document?
If so, it is content and should be an <img> element with a suitable alt attribute.
If it decorative? Then CSS is probably more appropriate.
I would give this anchor a padding-left and set image as non-repeating background.
Here is jsfiddle example: http://jsfiddle.net/ZDPnH/
We have three anchor tags. When all on one line they display correctly in IE8:
But when you separate the anchor tags onto separate lines for better code readability they do NOT appear correctly (there is a random extra "e" character and the alignment is off):
Any ideas?
Looks like the 'dulplicate characters bug', this is usually caused by white space or comments in your code. Long time since ive seen this, thought it was ironed out in ie7. Obviously not.
Think the only fix was to remove the white space or comments.