I have some UIFonts like this:
let regularFont = UIFont.systemFont(ofSize: 18, weight: .regular)
let mediumFont = UIFont.systemFont(ofSize: 18, weight: .medium)
I use them in my UIKit components like UILabel.
Now I want to render some text in a WKWebView using the same fonts.
I generate some html template in code but I can't figure out how to setup the css font styles to match my given UIFonts.
With some guesswork I came up with the following which kind of works for my given examples:
<html>
<head>
<style>
body {
font-family: '.AppleSystemUIFont';
font-size: 18.0;
font-weight: normal;
}
b {
font-family: '.AppleSystemUIFont';
font-size: 18.0;
font-weight: bolder;
}
</style>
</head>
<body>
<p>
Regular font <b>Medium font</b> Regular font
</p>
</body>
</html>
It works ok-ish but clearly this does not scale (how about other weights?).
Also I can already see my designer coming at me, claiming that font weight is off by .1 or something.
This is my current effort. It works on a limited subset of properties (bold, italic) but it does not handle font weight. Also I haven't tested for custom fonts yet but my guess is it won't work like that.
extension UIFont {
func cssStyleString(color: UIColor) -> String {
let colorString = "rgb( \(CIColor(color: color).red * 255), \(CIColor(color: color).green * 255), \(CIColor(color: color).blue * 255) )"
// not sure this is right
let fontFamily = self.fontName == self.familyName
let fontSize = self.pointSize
// trait is not quite right for translation into weight. suggestions?
let fontWeight = self.fontDescriptor.symbolicTraits.contains(.traitBold) ? "bold" : "normal"
// works for italic only.
let fontStyle = self.fontDescriptor.symbolicTraits.contains(.traitItalic) ? "italic" : "normal"
return "font-family: '\(fontFamily)'; font-size: \(fontSize); font-weight: \(fontWeight); font-style: \(fontStyle); color: \(colorString); "
}
}
So hence my question:
What is the best way to create css styles from a given UIFont, especially with respect to font weight?
The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:
...
.editor-styles-wrapper {
font-family: "Noto Serif", serif;
font-size: 16px;
line-height: 1.8;
color: #191e23;
}
.editor-styles-wrapper p {
font-size: 16px;
line-height: 1.8;
}
...
I've enqueued my own editor stylesheet using the following:
add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}
Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!
I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.
add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
unset($settings['styles'][0]);
return $settings;
}
My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:
editor-style.css
.editor-styles-wrapper {
#import "style.less";
}
I would still love to disable that embedded stylesheet though, if anyone knows how to do that.
I have a CSS file that styles my application MusicPlayer. I'm trying to style my array of javafx.scene.text.Text named sliderText. However nothing works. even when i use .text it styles the text of everything else EXCEPT my array of sliderText. any ideas how to get this working?
thanks
heres my declaration of slider text =
public static javafx.scene.text.Text[] sliderText = new Text[10];
also general question, how do i use .setID() in both javafx and CSS?
I've tried doing the following:
.text {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
And that changes literally everything except what i want it to
By default, Text objects have no style class attached to them. (Only Controls have default style classes set.) So your rule (which applies to the style class "text"), won't apply to your text objects.
The basic CSS tutorial for JavaFX covers all this, but briefly you need to do something like
for (Text text : sliderText) {
text.getStyleClass().add("text");
}
either in the constructor or in the start() method or an initialization method (you haven't shown enough context for your code for me to know how your application is set up).
For your question:
how do i use .setID() in both javafx and CSS?
you can do
someNode.setId("specialNode");
and then in CSS
#specialNode {
/* style rules for specialNode here.... */
}
Ids should be unique to a single node within any scene graph.
I've got a StyleableTextField that displays very basic HTML. To format the HTML I currently use a Stylesheet declared in AS3.
This works fine, but is rather inefficient for the designers to edit colors and stuff, so I need to include these tags in my main CSS.
The AS3 CSS declaration looks like this;
_styleSheet = new StyleSheet();
_styleSheet.setStyle("p", {fontSize:'15',color:'#FFFFFF', fontFamily: 'Courier New', fontWeight:'bold'});
This gets assigned to the StyleableTextField using the usual styleSheet = _styleSheet way.
The main CSS file is declared in my main application like this: <fx:Style source="Main.css"/>.
I already have CSS tags for spark components in my CSS, such like the following;
s|TextInput
{
contentBackgroundAlpha: .5;
contentBackgroundColor: #202020;
focusColor: #e1333a;
}
However, I need to address the very instance of StyleableTextfield in the CSS (I've got other's in my app, but only this one displays HTML text).
Has anyone got an idea how to do this?
Working on a mobile project btw.
Flex supports a CSS id selector.
#instanceID
{
...
}
or
ObjectType#instanceID
{
...
}
I haven't been able to test this thoroughly, but it appeared to work for me:
#_objectName
{
p: pstyle;
}
.pstyle
{
fontSize: 15;
...
}
Hi I've cross browser fixed a site on all thinkable PC browsers, including Safari.
Now my smart ass designer sent me a screen shot of the whole layout collapsing on mac.
I have an idea how to solve it (reduce the margin on an element by a few pix), but i don't know how to target Safari only, preferably Safari mac only.
What's the best way to do this?
Here's a script you can include on your page (or in a separate js file) that will add a class to the html element so that you can add safari-mac specific css to your css file.
(function($){
// console.log(navigator.userAgent);
/* Adjustments for Safari on Mac */
if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Mac') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
// console.log('Safari on Mac detected, applying class...');
$('html').addClass('safari-mac'); // provide a class for the safari-mac specific css to filter with
}
})(jQuery);
Example css fixes, which can be in page or in your external css file etc:
/* Safari Mac specific alterations
* (relies on class added by js browser detection above),
* to take into account different font metrics */
.safari-mac #page4 .section p.fussyDesigner { margin-right: -15px; }
.safari-mac #page8 .section-footer { width: 694px; }
Thanks to other answers for ideas, I've tried to wrap everything up into a complete solution in this answer.
The user agent string contains operating system information, and you are probably already checking the user agent string for the browser type.
A mac browser will have the string "Mac OS X 10." in the user agent string.
I think the selected right answer is outdated and does not work now.
Here is the output of navigator.vendor
Safari on iPad
Mozilla/5.0 (iPad; CPU OS 8_3 like Mac OS X) AppleWebKit/600.1.4
(KHTML, like Gecko) Version/8.0 Mobile/12F69 Safari/600.1.4
Safari on Mac
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.2.5
(KHTML, like Gecko) Version/8.0.2 Safari/600.2.5 Safari/600.1.4
As you can see Mac appears in navigator.vendor of both scenarios.
Here is my version
var isSafariMac = /Safari/.test(navigator.userAgent) &&
!/Mobile/.test(navigator.userAgent) &&
/Apple Computer/.test(navigator.vendor);
So you can use this to target Safari on Mac:)
Building off of #Tim Abell's solution, you can use a similar approach to get classes for all of the major platforms and browsers for broader detection and flexibility.
This snippet will add a class for the browser name and another for the platform name to the <html> element. So, for example, Safari on Mac would end up being <html class="safari mac">.
Javascript/jQuery
//Search for keywords within the user agent string. When a match is found, add a corresponding class to the html element and return. (Inspired by http://stackoverflow.com/a/10137912/114558)
function addUserAgentClass(keywords) {
for(var i = 0; i < keywords.length; i++) {
if(navigator.userAgent.indexOf(keywords[i]) != -1) {
$("html").addClass(keywords[i].toLowerCase());
return; //Once we find and process a matching keyword, return to prevent less "specific" classes from being added
}
}
}
addUserAgentClass(["Chrome", "Firefox", "MSIE", "Safari", "Opera", "Mozilla"]); //Browsers listed generally from most-specific to least-specific
addUserAgentClass(["Android", "iPhone", "iPad", "Linux", "Mac", "Windows"]); //Platforms, also in order of specificity
With this approach, you can do things like:
CSS
.safari { /* Safari only */ }
.mac { /* Mac only */ }
.safari.mac { /* Safari Mac */ }
html:not(.safari) { /* All browsers except for Safari */ }
html:not(.safari.mac) { /* All browsers except for Safari Mac */ }
Glad I found this page, I feel your pain anytime you use padding with font based navigation or tabs you run into these Mac/PC issues because they render fonts differently.
if (navigator.userAgent.indexOf('Mac') >= 0) {
$(element).addClass('mac_os')
}
// targets macs only`
You probably need to run a regex query against the User-Agent and selectively load a CSS file just for Safari for Mac.
Also: Are you sure that Safari for mac and safari for windows render the same page drastically different?
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Add your Safari-specific styles here. */
}
An example of providing dynamic styles for various browsers:
<?php
$str = $_SERVER['HTTP_USER_AGENT'];
$pos1 = strpos($str, "Safari");
$pos2 = strpos($str, "Chrome");
$pos3 = strpos($str, "MSIE");
$pos4 = strpos($str, "Firefox");
if($pos1 != '' && $pos2 == '') // Safari
$style = "width:200px; height:100px;";
else if($pos2 != '') // Chrome
$style = "width:180px; height:90px;";
else if($pos3 != '') // IE
$style = "width:180px; height:90px;";
else if($pos4 != '') // Firefox
$style = "width:180px; height:90px;";
?>
<div style="<?php echo $style; ?>">Hello world</div>
for this question i have solution with the help of CSS, please find the below code fixes..
/* Safari 10.1+ */
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance:none) {
.classname{
padding: 1px 0px; // css styles
}
}
}
Please try this in .scss file.
Use this in css. it will be rendered only in Safari
/*\*/
.some-class {
/* Here comes some options */
}
/**/