I'm trying to render a custom checkbox in an Electron app.
:before {
content: '✔';
}
It renders differently at random without any code changes:
It seems that it defaults to a font Segoe UI Emoji. Is it possible to force rendering as left picture (not as emoji)?
It's possible to override the Emoji rendering of a psuedo element. I would recommend trying to use a special unicode character. U+FE0E (0xFE0E). Like so: content: "\2714 \FE0E";
content: "[enter your emoji unicode here] \FE0E";
I used this convert tool to get the right CSS unicode for the emoji to place inside the 'content': https://r12a.github.io/app-conversion/
About U+FE0E
This codepoint may change the appearance of the preceding character.
If that is a symbol, dingbat or emoji, U+FE0E forces it to be rendered
in a textual fashion as compared to a colorful image. The Unicode
standard defines some standardized variants. See also “Unicode symbol
as text or emoji” for a discussion of this codepoint.
Sources: https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
Example:
.test:before {
content: "✔";
}
.test2:before {
content: "\2714 \FE0E";
}
<!-- if your looking in Chrome or Firefox this will both look the same -->
<div class="test"></div>
<div class="test2"></div>
Related
I've got a stackblitz Angular 5 app for implementing table sorting here - https://stackblitz.com/edit/angular-rxdzom. It's based on the code from http://www.carbonatethis.com/sort-table-columns-with-angular-and-typescript/. It uses an ./app/sortable-table/sortable-column.component.css with the contents:
.caret-up:before {
content: "\f0d8";
}
.caret-down:before {
content: "\f0d7";
}
and an ./app/sortable-table/sortable-column.component.html that contains two i tags that reference these with the class attribute. Instead of showing the caret-up and caret-down, it substitutes a rectangular box. If I replace caret-up and caret-down with the Font Awesome library, "fa fa-caret-up" and "fa fa-caret-down", it works properly. My environment at work doesn't use Font Awesome and it's not an option to add it, so I need to create the css content manually as I'm attempting above. Any help is appreciated!
I've tried researching this on my own, and clearly have something that looks like it should work, it just doesn't. I've used references like http://webdesignerwall.com/tutorials/how-to-add-icon-fonts-to-any-element-with-css that seem to indicate the css is valid, and I've tried using ".caret-up i::before" which also does not work. I'm clearly missing something or doing something wrong. I even tried adding
padding-right: 10px;
font-family: "FontAwesome";
before the content property but that didn't help either.
I assume the css shown above is in your styles property of your component? If so, the issue is that the backspace needs to be escaped in your string. Update them to the following and you should be good!
.caret-up:before {
content: "\\f0d8";
}
.caret-down:before {
content: "\\f0d7";
}
An alternative for adding icons is through material icons
You can find the icons here : https://material.io/icons/
Include the following link in your index.html
And in the css add the class 'material-icons' to your property.
For example-
keyboard_arrow_up
You can refer to different symbols name on the above material icons link provided.
Okay, so a part of this was me being in the dark about our environment. We had updated font awesome to Semantic UI, which uses a port of the font awesome fonts so I just had to use those fonts. To do it manually, I could use:
.caret-up:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d8";
}
.caret-down:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d7";
}
and to put the icons after the text, I just needed to move the "ng-content" tag above the "i" tags for asc/desc sort order. So, using the Semantic UI fonts, my sortable-column.component.html became:
<ng-content></ng-content>
<i class="caret up icon" *ngIf="sortDirection === 'asc'"></i>
<i class="caret down icon" *ngIf="sortDirection === 'desc'"></i>
And it worked great. I forked my Stackblitz app at https://stackblitz.com/edit/angular-nfwe6j to show how this was accomplished in my environment using the Semantic UI 2.3.1 of the font awesome fonts.
While going through the css drafts spec for display properties came across this property
display:ruby
A little bit of search explained that is used for showing Japanese characters .
is this the only use case? (using it for normal text doesnt do anything special , futher more, chrome marks it as a invalid property)
how does it differ from our usual block container ?
From HTML5 docs
The ruby element allows one or more spans of phrasing content to be marked with ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation or to include other annotations
So you basically use it for pronunciation of any language. But it does not restrict you to using it only for that.
I was having trouble with the a tag taking the whole block in an li, so, i used ruby and it didnt take the whole block space, nor did it ruin the format of the rest of the visual structure.
From MDN web docs:
The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML elements.
You can use it together with display: ruby-base; and display:ruby-text, which similarly act like <rb> and <rt>.
To see an example on how all of these could be used:
body {
font-size: 2em;
}
ruby {
ruby-position: above;
}
.ruby {
display: ruby;
}
p.ruby>span:nth-child(odd) {
display: ruby-base;
}
p.ruby>span:nth-child(even) {
display: ruby-text;
}
<p>
<ruby>
<rb>漢</rb>
<rb>字</rb>
<rb>が</rb>
<rb>難</rb>
<rb>しい</rb>
<rp>(</rp>
<rt>kan</rt>
<rt>ji</rt>
<rt>ga</rt>
<rt>muzuka</rt>
<rt>shii</rt>
<rp>)</rp>
</ruby> ！
</p>
<p class="ruby">
<span>漢</span>
<span>kan</span>
<span>字</span>
<span>ji</span>
<span>難</span>
<span>muzuka</span>
<span>しい</span>
<span>shii</span>
<span>!</span>
</p>
I have css for print as simple as this:
#page {
#top-left {
content: "TOP SECRET";
color: red
}
#bottom-center {
content: counter(page);
font-style: italic
}
}
But the Chrome print preview and save to pdf seems not to recognize this at all. How can I correctly set the header and footer when priting?
EDIT: #page is supported by none ref
However, do I have other choice to do this. I'm not working on websites. The product wants a pdf as result only. I can accept chrome, webkit, plantomjs etc.
You can use the open tool PagedJS to render iframes or whole pages using the CSS paged-media spec. https://pagedjs.org/
This tool is a polyfill that converts blocks like the one you posted (CSS Paged Media that isn't implemented by browsers) into browser-compliant html/css.
It also has a CLI alternative that sets up puppeteer & creates PDF outputs: https://gitlab.coko.foundation/pagedjs/pagedjs-cli
Near as I can determine, CSS features for paged media are primarily for systems that render for printing, rather than systems that render for the screen (browsers) or the print feature of browsers. An example of an HTML/CSS engine for printing is Prince. So, #page won't work in a browser, nor (as far as I know) was it intended to.
I’ve got the following CSS to add a PDF icon to any link that links to a PDF:
a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}
Is it possible to put some title and alt attributes on this image? I would like it so that the user is able to hover over the icon and get some text like “This links to a .pdf file.” Which I’ve typically done just by putting title attributes to it, but can’t figure out if I can do that through this method.
No, content only accepts raw text and image data, not HTML.
You need to use JavaScript to dynamically add tooltips to your existing HTML elements.
As for the icon, you could use a background image and some padding:
a.pdf-link {
padding-left: 2px;
padding-right: 20px;
background: url(../images/icon-pdf-link.gif) right center no-repeat;
}
If you need to specifically have a tooltip only on the icon, though, you need to do everything in JavaScript as the comments say.
You can this, these days, using CSS3.
According to https://www.w3.org/TR/css-content-3/#alt:
1.2. Alternative Text for Speech
Content intended for visual media sometimes needs alternative text for speech output. The content property thus accepts alternative text to be specified after a slash (/) after the last . If such alternative text is provided, it must be used for speech output instead.
This allows, for example, purely decorative text to be elided in speech output (by providing the empty string as alternative text), and allows authors to provide more readable alternatives to images, icons, or text-encoded symbols.
Here the content property is an image, so the alt value is required to provide alternative text.
.new::before {
content: url(./img/star.png) / "New!";
/* or a localized attribute from the DOM: attr("data-alt") */
}
Based on the answer I just did the following with jQuery:
$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");
I'm trying to add content to something before an item using the CSS :before + content: fields. I want to insert a checkmark (☑), BUT if I use that in the content option, it prints as the literal. How can I tell CSS to make that a checkmark, not the literal string ☑?
Try this:
#target:before {
content: "\2611";
}
You need to use Unicode values inside the content property. (The list of miscellaneous symbols may also be useful.)
A heavy checkmark is listed as U+2713 so you would put content: "\2713";
Use the checkbox character literally in your CSS rule instead of the encoding -
#target:before {
content: "☑";
}
See: http://jsfiddle.net/e3Wt2/