I am trying out Brackets.io, but it looks much worse than Sublime on my screen (Apple 27"). The font/text (tried many different) is not as sharp and "fat" as it is in Sublime Text. Is there a way to make it look more like Sublime?
(I wonder if Brackets is optimized for retina displays (?), and not "ordinary" displays.)
See the attached image (Brackets.io on top, Sublime Text 2 under):
Try changing the Brackets font using the View > Theme settings box. Sublime defaults to "Consolas" on Windows, and "Menlo Regular" on Mac -- so one of those may provide a closer match.
You can also try writing a simple Brackets extension that introduces this CSS tweak:
define(function (require, exports, module) {
"use strict";
var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
ExtensionUtils.addEmbeddedStyleSheet("body { -webkit-font-smoothing: auto !important; }");
});
That will make the font weight feel a lot heavier.
The theme DarkSoda gives you the same colors as sublime text content but the background is closer to black in that. DarkSoda Github theme and demo
Related
When I create an R Markdown notebook in RStudio, the code chunks do all the usual text coloring of RStudio -- for example, comment lines and text constants in green, numerical constants in blue, etc. All the coloring still shows up nicely when I open RStudio's HTML preview window, and equally well when I view the HTML document in a browser.
Colors embedded in ggplot2 graphics objects in the same document are appearing equally successfully, up to this point (on-screen viewing of HTML).
However, when I send the HTML document to a printer from my Mac's browser, or when I use the Print dialog to export the HTML doc to PDF, all the text coloring disappears and everything is rendered in black text, even as the ggplot2 graphics colors are still completely successful in the printed output.
How can I recover the text coloring in printed output? Thanks.
(This is happening on a Mac laptop, just the same in Firefox and Safari.)
Editing 1 day later to add:
there's a symptom I hadn't noticed until after I applied #user2554330's initial solution. Hyperlinks in the markdown text (i.e., outside code chunks) get transformed into black text as well, and both the link text and the underlying URL get printed, unlike in the HTML output which is in color and shows only the text of the link.
I tried .hljs-link based on what I found at https://highlightjs.readthedocs.io/en/latest/css-classes-reference.html, but it didn't seem to have any effect.
This is hard to fix.
The problem is that rmarkdown uses the bootstrap framework to set styles. That framework tries to standardize the display on different browsers; since browsers are really variable in how they handle printing, it chooses a very simple black on white style for printing text.
You can create a CSS file that overrides these choices, or you can edit the source to the bootstrap CSS file so that it doesn't do that. Both are hard.
The problem with creating your own CSS file is that you need to re-specify the colors for each different type of text, marking all of the choices as !important. rmarkdown has several different color schemes for highlighting code. The default one looks like this after editing:
.hljs-literal {
color: #990073!important;
}
.hljs-number {
color: #099!important;
}
.hljs-comment {
color: #998!important;
font-style: italic;
}
.hljs-keyword {
color: #900!important;
font-weight: bold;
}
.hljs-string {
color: #d14!important;
}
If you're using a different highlight style, you'll need to edit that one instead.
Save this in a file, e.g. style.css, then put this in your YAML header:
output:
html_document:
css: style.css
The alternative to this is to edit the bootstrap source so that it no longer forces the color to black. Look for the #media print sections, and edit those. The file to edit is
<rmarkdown dir>/rmd/h/bootstrap/css/bootstrap.min.css
(which is a minimized version of bootstrap.css, so it's hard to edit).
If you really know what you're doing, you can recompile the file with different options; I haven't tried that.
EDITED TO ADD:
If you also want URLs to appear in color, you'll need to do something similar for them: override the override. A simple version is
a {
color: #23527c!important;
}
which forces all links to be blueish. This isn't ideal; it doesn't let links change color when selected, so the original on-screen version of your document will be changed, not just the print version. I'm too lazy right now to figure out how to handle the color change.
To stop the URL from being appended, you want this text:
a[href]::after {
content: "";
}
This says that anchors with HREF elements should get an empty string appended. The standard bootstrap spec appends the extra text that you saw. This doesn't appear to need !important, since the standard one didn't use that.
Put both of these entries into your style.css file, and you should get your links in color when printing, without appending the URL.
I just stumbled across this question, while also checking out other relevant answers, so I think this SO answer fixes your hyperlink problem. TLDR: Add urlcolor: blue and possibly linkcolor:red to the documents yaml section at the top :)
I would like to use an embedded font along side Arial as a substitute. The embedded font requires a much larger font-size.
How can I make sure that Arial displays at 15pt, and Bebas displays at 20pt, for the same element. (For the same piece of text)
Thanks!
*Let me explain further:
I have a string of text. I want it to display as Bebas or Arial. When Arial is loaded as a substitute, it needs to have a different font-size and weight, as sharing the font-size doesn't work well for these fonts (Bebas is small).
You could use a script like FontChecker to check if a font is available. It relies on MooTools and gets called like this:
window.addEvent('domready',function() {
var fc = new FontChecker();
if (!fc.check('Bebas')) {
$$('.someclass').setStyles({'font-size': '15pt'});
}
});
If Bebas isn't available, it sets the font size for all elements with class someclass to 15pt.
Your CSS file:
.someclass {
font-family:Bebas,Arial,sans-serif;
font-size:20pt;
}
If you don't use MooTools, maybe there's a similar script for other libraries or vanilla JS (=plain JS without libraries). Or just rewrite it, it's quite short.
edit:
Some other scripts (I don't know them, I only use FontChecker):
jQuery: http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
Vanilla: http://www.samclarke.com/2013/06/javascript-is-font-available/
Another vanilla: http://www.lalit.org/lab/javascript-css-font-detect/
I understand that with CSS formatting the first letter of each paragraph is possible via:
p:first-letter
{
font-size:20px;
}
However upon using this code it is impossible to highlight/select these "First Letters" from the web browser, is there a way to amend this?
Edit - It is possible to select the text, however it isn't shown visually, how can I change this?
This is a bug in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528
Right, it is not visually selected but in the background it is. If I select and copy and then paste it, I get "Hello" so this just might be a problem with the different font-sizes. font-variant:small-caps works perfectly (but uses uppercase).
You might want to try Lettering.js or alternatives
http://letteringjs.com/
https://github.com/davatron5000/Lettering.js
Is there a way to change what text is displayed in a HTML file based on if the user has a certain font-face (preferrably without javascript)?
For example if there is a font-face 'AlphaIcons' I want to display:
<span>A</span>
Else I want to display:
<span><img src="apple.png">Apple</span>
(Giving the font to users without it is not an option in this case).
EDITED***
Check out this post - it may lead you in the right direction:
Changing Body Font-Size based on Font-Family with jQuery
In the first answer, it gives a new library that can detect fonts. If you can give it a true/false boolean, then you may be able to write in an image swap.
I believe CSS can do this already for you, using font-family prioritizes the fonts you want to use. If it can't find the first font on the user's system, it goes to the next.
http://www.w3schools.com/css/css_font.asp
Just use css like so:
span {
font-family:"AlphaIcons", "Times New Roman", Times, serif;
}
or am I missing something???
If you want to do some fancier fonts using javascript, check out Google's webfont library:
http://www.google.com/webfonts
You can't check this with pure HTML or CSS. You need Javascript to handle this problem.
Go through the following steps:
Embed the font files via font-face
Detect if font-face is avaiable in the clients browser with javascript. e.g. modernizr can do the trick
When font-face isn't available, insert the image into the span with the following code:
HTML
<span data-image="apple.png">A</span>
Javascipt
// check font face compatibility
if (!Modernizr.fontface) {
// replace each span content with the right image
$('span').each(function(){
// get the image
var image = $(this).data('image');
// insert this image into the span tag
$(this).html('<img src="'+image+'" />');
});
}
data-attributes are only one of many possible solutions. Just a little hint.
In general, there a no methods to check the availability of fonts without Javascript.
I have html content which a native application built with PhoneGap.
This application has 2 fields, one of text and a texarea.
When I write in each activates the blue background, and I can see thoroughly.
How I can disable that blue?
If it's using CSS then the code activating the blue background will probably look something like this:
textfield:focus, textarea:focus {
background-color:blue;
}
If that is the case then you can simply remove that CSS rule and it should solve your problem.
Alternatively, the background colour may be being added through javascript in which case you'd have to check your javascript files to see where it is happening and remove it from there.