I have tried to use display: run-in in order to create a semantic and nice-looking metadata name-value list, liks this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Run-in description list test</title>
<style>
dt {
font-weight: bold;
display: run-in;
}
dt:after {
content: ": "
}
</style>
</head>
<body>
<dl>
<dt>Subject</dt>
<dd>A Question</dd>
<dt>From</dt>
<dd>Mr Smith</dd>
<dt>Time</dt>
<dd>2013-08-05</dd>
</dl>
</body>
</html>
The expected result is
Subject: A Question
From: Mr Smith
Time: 2013-08-05
You can watch it live. (Actually, the idea to use display: run-in was given to me by Ian Hickson, after I started nagging about the di element from XHTML 2.0. One alternative is to use float, but that comes with a number of difficulties.)
Until recently, this worked wonderfully in every modern browser except Firefox (that is, it worked perfectly in Internet Explorer, Google Chrome, Opera, and Safari (I think)). But very recently I discovered that it doesn't work in Google Chrome anymore.
Question: Has Google Chrome dropped support for display: run-in? Is there an alternative that works the same way?
I'm not aware of any change to Chrome's support of display:run-in but the setting has always seemed unloved.
Hixie has been consistently opposed to <di> and I kind of understand why. HTML is a semantic language and the semantics are fully defined by dl/dt/dd. The only practical problems are presentational, and that makes it a CSS problem, not an HTML one.
Unfortunately, then current state of CSS doesn't seem up to the job. For dl/dt/dd, and for many similar problems, we really need a mechanism for wrapping groups of elements in a pseudo element which could then perform the role of the <di>.
Obviously, there is no current setting that does what display:run-in is supposed to do. Having said that, in your specific test case, you could achieve the same effect with this CSS:
dt {
font-weight: bold;
display: inline;
}
dt:after {
content: ": ";
}
dd {
display: inline;
margin:0;
}
dd:after {
content:'\0A';
white-space:pre;
}
I'd like to offer a different, more explicit approach to the solution. One that can be extended to a more general case of missing display:run-in behavior.
I.e. I'm using h4->p flow-in transition to compose a nicely formatted list of item properties:
h4 {
font-weight: bold;
display: inline;
}
h4::after {
content: ": ";
}
h4 + p {
display: inline;
}
h4 + p::after {
content: '\0A';
display: block;
}
Here, I'm using "immediate sibling" (+) CSS selector to select p elements immediately preceded by h4 elements. If h4 is followed by any other element, it will be displayed following the normal flow.
An alternate selector ~ will select not one but all elements of the said type, which is not what usually expected from run-in behavior, and will also extend to all tags of the same type in current scope regardless of the other intermixed tags, which could break the layout completely.
Related
It is correct to apply 2 different CSS pseudo-elements to the same class on the same time?
Browser interpret my desired result, at least on Firefox everything works fine, but for me is important if this is a correct approach.
Do you have a correct CSS approach of this scenario?
.critselect {
display: block;
margin-top: 40px;
}
.critselect p:nth-child(2) {
text-transform: lowercase;
}
.critselect p:nth-child(2):first-letter {
text-transform: uppercase!important;
}
<div class="critselect">
<p class="randvis">This is first paragraph and have <strong>CRM / Marketing</strong> or others extrnaly inserted values that must remain Uppercase.</p>
<p class="randvis">This is second paragraph and have <strong>French, English, German</strong> or others eternaly inserted values that must to be converted via CSS to lowercase.</p>
</div>
yes, it's correct to apply two different CSS pseudo-class to the same class,
but in your scenario..., I do not see it very feasible, it is better to use text-transform: capitalize; it is also not necessary to use the important! is bad practice
I want to make a HTML document with a list of math formulas mimicking a \itemize latex environment (i.e. markers should be like "1), 2), etc") and I would like to have a two-columns layout.
For math formulas I use MathJax, for the markers I used the CSS trick at https://stackoverflow.com/a/1636635/3025740 and for two-columns I use the CSS property column-count adding vendor-specific properties as in http://www.w3schools.com/cssref/css3_pr_column-count.asp
Any two of these three mechanisms seem to work fine, but when I mix the three of them it does not: the font size of math formulas (recall, rendered with MathJax) is way too small.
Here is a minimal code to reproduce the problem (tested on Ubuntu 16.04 LTS with Firefox 49.0.2)
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<style media="screen">
ol {
counter-reset: list;
}
ol > li {
list-style: none;
/*removing this property fixes MathJax size but breaks markers*/
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, decimal) ") ";
position: absolute;
left: -1.4em;
}
.twocolumns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
</style>
</head>
<body>
<div class="twocolumns">
<ol>
<li>\(2 \times 5\)</li>
<li>\(4 \times (2 +11)\)</li>
<li>\(4 \times 5 - 2 \times 7\)</li>
<li>\(4 \times (87 - 45) + 5 \times 2\)</li>
</ol>
</div>
</body>
</html>
As indicated in the snippet removing position: relative; in ol > li in the CSS fixes the MathJax size issues. Sadly it also breaks the marker trick (markers disapear)
Any idea how to make this work?
MathJax uses a relatively tall box (60ex high) to determine the ex-height of the surrounding font, and it looks like FF and Edge both do something funny with the size of that box in your multi-column setting. They seem to override both the width and height set by MathJax for this box, and so MathJax gets the wrong ex-height (and so sets the wrong font scaling). Since both FF and IE do it, perhaps it is the correct behavior by the HTML or CSS spec, and WebKit is getting it wrong. I haven't tried to figure that out.
In any case, it turns out that adding overflow:hidden to the CSS for the test element used by MathJax resolves the problem (the browsers don't screw up the height in that case, for reasons beyond my comprehension), so adding
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: {
styles: {".mjx-ex-box-test": {overflow: "hidden"}}
}
});
</script>
to your page, or adding
.mjx-ex-box-test {
overflow: hidden;
}
to your CSS file should resolve the issue.
I've got what I'd consider an advanced use case for this which probably doesn't apply to 90% of use cases but here goes.
I have some HTML (components) markup that looks like this
<my-element>
<div class="element1"></div> <!-- i am hidden -->
<div class="element2"></div>
</my-element>
And my parent element is in charge of styling it's children, so I'd say that's okay because you can use the following
polyfill-next-selector { content: ".element1" }
::content .element1 { display: none; }
Good, now I want to do something else when my parent element obtains a new class or attribute.
<my-element class="showElement1">
<div class="element1"></div> <!-- show me now -->
<div class="element2"></div>
</my-element>
// Here is the confusing part
polyfill-next-selector { content: ".element1" }
:host(.showElement1) ::content .element1 { display: block; }
Works just fine in chrome, but the polyfill breaks in other browsers.
For example, I'd expect to see the following CSS markup rendered by the polyfill.
my-element.showElement1 .element1 { display: block; }
But this does not get created.
Am I simply mis-interpreting the way the :host and ::content systems work or is this a bug with the polyfiller that needs to be catered for?
I was getting confused by the ::content and the content: "". They're not related in the same way.
The trick is knowing that the content of the content: "" portion of the code is what gets read and converted by the polyfill into your final CSS.
polyfill-next-selector { content: ":host.showElement1 .element1" }
Becomes:
my-element.showElement1 .element1
And in browsers that don't require the polyfill (i.e. chrome 38 latest at time of writing) stays the same. i.e:
:host.showElement1 ::content .element1 {}
And finally, to make it work properly, you need to keep it all together so it reads like this
polyfill-next-selector { content: ':host.showElement1 .element1'; }
:host(.showElement1) ::content .element1 {
display: block;
}
Posted as an answer for reference in case there are other people out there who might have been confused by the same situation I faced.
Is it possible to have the quotes in the following HTML bold and red, without altering the HTML code?
<div class="client_message">“ Ankit ”</div>
Basically I would like to have some CSS that results in the same effect as
"Ankit" but these quotes must be in bold.
Is this possible with CSS only?
You can't. CSS has very limited capability when it comes to selecting things which are not elements.
The nearest CSS has is ::first-letter, but that would select “ A.
If you can use JavaScript you could change the HTML to
<div><q>Ankit</q></div>
(mentioned in comment before)
Now selecting the elements is easy
q {
color: red;
font-weight: bold;
}
.client_message:before {color: red;font-weight: bold;content: "“";}
.client_message:after {color: red;font-weight: bold;content: "”";}
div.client_message:before {
position: absolute;
z-index: 2;
overflow: visible;
left: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "“";
}
div.client_message:after {
position: absolute;
z-index: 2;
overflow: visible;
right: .0em;
color: red;
background-color: white;
font-weight: bold;
content: "”";
}
div.client_message {
position: relative;
display: inline;
z-index: -1;
}
css has a content property and a :before and :after selector class, you can use these to insert and style the quotes.
note CSS content property is not supported is old IE's less than version 9 http://caniuse.com/css-gencontent
EDIT You have to do a bit of fudging in the CSS but you can get it to work http://jsfiddle.net/wtceu/
EDIT 2 I've put a background-color so that the tails from the HTML entity quotes don't show through the new overlapped quotes. The only issue is if the text takes up more than one line, the ending quote won't position correctly (you can reproduce this by shrinking the width of the jsfiddle window).
Quotes require ‘possessive’ punctuation. In “[Css The Definitive Guide 4][1]”, pp. 786-788, Eric Meyer describes ‘Generated quotes’.
With quotes, you can define quotation patterns to as many nesting levels as you like. In English, for example, a common practice is to start out with a double quotation mark, and a quotation nested inside the first one gets single quotation marks. This can be recreated with “curly” quotation marks using the following rules:
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
<quotation>
<quote>
In the beginning, there was nothing.
And God said:
<q>
Let there be light!
</q>
And <abbr>there’s</abbr> some light, that’s [Mac keyb] good.
</quote>
The Holy Bible, Creation
</quotation>
“In the beginning, there was nothing. And God said: ‘Let there be light!’ And there was light.”
The hypotheses (nor acronyms) used in English abbreviation contractions do not respond to Meyer's simple quotation CSS. That's where ’ and ” are useful, working with the quotation, [abbr and acronnym][2] elements. Note that ABBR element (e.g., WHO) is distinct from the abbr attribute (it's one, he's done).
Note also that Apple device keyboards use Option and Shift-Option keys pressed-together with [ and ] keys to generate English opening and closing curly quotes respectively, in this and many other web environments. Meyer's CSS and simpler Apple keyboard shortcuts work well for ‹other languages›, such as French quotation punctuations.
Other devices and networks may similarly adapt or even block the simple display of HTML and CSS quotation code (and related punctuation). There's nothing wrong with offering HTML/CSS guidance, where appropriate. Curly quote styling can encompass more than simple quotes.
[1]: https://itebooksfree.com/book/css-the-definitive-guide-4th-edition/31410. Meyer and Weyl ©2018.
[2]: https://maxdesign.com.au/news/abbreviations/ ...no discussion of block elements that are a foundation of written language quotations. Contraction and quotation, CSS technology character string focus tends to ignore mainstream curly quotes development. Meyer being an important exception.
Clearly we can accomplish far more than most are aware of, without almost scripted neglect in our collective knowledge base. As an aside, it would be nice if Stack quotation marks were more legible.
Moving forward, perhaps to cover our bases better, the CSS should look like this.
quotation { color: forestgreen; display: block; }
quote { display: block; quotes: '\201C' '\201D' '\2018' '\2019'; }
quote::before, q::before { content: open-quote; }
quote::after, q::after { content: close-quote; }
quote { quotes: '\201C' '\201D'; }
blockquote { quotes: '"' '"' "'" "'" '"' '"'; }
blockquote p::before { content: open-quote; }
blockquote p::after { content: no-close-quote; }
Google finds many people unable to style the simple quotes. Still looking for contraction code: i.e., root’extension possessive single right curly quote styling. Can current DOM handle contraction single right quote without script... what's that trick?
So I am aware of this option: Page numbers with CSS/HTML.
It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?
I have tried making just a blank html file and in the head adding this between two style tags:
#page {
#bottom-right {
content: counter(page) " of " counter(pages);
}
}
I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the #page and #bottom-right tags, since I have gotten content to work many times.
I've been trying to implement paged media as well and have found, according to this Wikipedia page, that there's no browser support for margin boxes as yet. No wonder it wouldn't work!
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)
See the table, Grammar and Rules, margin boxes section. Margin boxes are what's needed for page numbering as well as running headers and footers. Getting this implemented would save me the overhead of having to convert the printed media to PDF.
Not using #page, but I have gotten pure CSS page numbers to work in Firefox 20:
http://jsfiddle.net/okohll/QnFKZ/
To print, right click in the results frame (bottom right) and select
This Frame -> Print Frame...
The CSS is
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
and the HTML is
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!
Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.
You can set your starting number to whatever, the default is 0.
Example:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
... in theory. In real world only PrinceXML supports this.
Via Mozilla, (Printing a document)
This puts a header and footer on each printed page. This works well in Mozilla, but not quite so well in IE and Chrome.
<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
Heading for paged media
</div>
<div id="print-foot">
Page:
</div>
</body>
</html>
The CSS:
/*** Print sample ***/
/* defaults for screen */
#print-head,
#print-foot {
display: none;
}
/* print only */
#media print {
h1 {
page-break-before: always;
padding-top: 2em;
}
h1:first-child {
page-break-before: avoid;
counter-reset: page;
}
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
font-size: 200%;
text-align: center;
}
#print-foot {
display: block;
position: fixed;
bottom: 0pt;
right: 0pt;
font-size: 200%;
}
#print-foot:after {
content: counter(page);
counter-increment: page;
}
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged.js.
This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the #page and most the CSS3 specifications work for Chrome.
Solution 1 (easy) if you are OK with cutting your view into pages, ready to print
Just add their CDN in the head tag of your page :
<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">
You can then add page numbers by using the automated counter page. Example :
HTML to put anywhere you want to display the current page number:
<div class="page-number"></div>
CSS to make the number appear in the div :
.page-number{
content: counter(page)
}
The library also allows to easily manage page margins, footers, headers, etc.
Solution 2 (trickier) if you want to show numbers (and page breaks) only when printing
In this case, you need to apply the Paged.js CDN only when printing the document.
One way I can think of would be to add a print me button that fires Javascript to :
add the CDN to the page
and then execute window.print(); to launch the printing prompt of the navigator