So i am using this font called "Aileron" which i downloaded from here.
CSS:
#font-face {
font-family: 'Aileron SemiBold';
src: url('./fonts/Aileron-SemiBold.otf');
}
body {
font-family: 'Aileron SemiBold';
font-size: 12px;
}
Please refer the image:
Digit "2" looks smaller than the rest of the digits
This is only for SemiBold variant of the font and when font-size is between 11.7px and 12px.
For sizes lower than 11.7px and higher than 12px it works fine.
I tried the "font-variant-numeric" property but it doesn't work.
I have had similar problem with font being smaller for English than other language. I wrote some javascript code to make font-size smaller for those letters. So based on my answer I have adapted (since in your case you only care where font-size is between 11.7px and 12px I also used this answer)
function do_elem(elem) {
function getStyle(el, styleProp) {
var camelize = function(str) {
return str.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
};
if (el.currentStyle) {
return el.currentStyle[camelize(styleProp)];
} else if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el, null)
.getPropertyValue(styleProp);
} else {
return el.style[camelize(styleProp)];
}
}
function getFontSize(elem) {
return parseFloat(getStyle(elem, 'font-size'));
}
function textNodesUnder(node) {
var all = [];
var font_size = getFontSize(node)
for (node = node.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 3) {
if (font_size >= 11.7 && font_size <= 12.0) {
all.push(node);
}
} else {
all = all.concat(textNodesUnder(node));
}
}
return all;
}
function replace_node(node, str) {
var replacementNode = document.createElement('span');
replacementNode.innerHTML = str
node.parentNode.insertBefore(replacementNode, node);
node.parentNode.removeChild(node);
}
function decorate_english(str, cls) {
var a = []
for (var i = 0; i < str.length; i++) {
var c = str.charAt(i);
if (c == 2) {
a.push("<span class=\"" + cls + "\">" + c + "</span>")
} else {
a.push(c)
}
}
return a.join("")
}
function process_text_nodes(nodes) {
for (var index = 0; index < nodes.length; index++) {
var node = nodes[index];
var value = node.nodeValue
var str = decorate_english(value, "eng2")
if (str != value) {
replace_node(node, str)
}
}
}
var nodes = textNodesUnder(elem);
process_text_nodes(nodes)
}
// fix smaller letter "2"
do_elem(document.body);
body {
font-size: 16px
}
.eng2 {
font-size: 120%;
color: red;
}
.inner {
font-size: 11.9px
}
<body>
0123456789
<div style="font-size:11.8px">
0123456789
</div>
<div style="font-size:12.8px">0123456789
<div class="inner">0123456789</div>
</div>
</body>
This issue is related to (cff based) opentype hinting.
Hinting will try to fit stems to the current pixel grid.
Unfortunately this can sometimes result in weird rendering.
As a workaround you could convert your otf to a woff2 with a tool like transfonter.
This will usually strip the original cff hinting or convert them to truetype hinting instructions (transfonter has several hinting options).
Example: unhinted woff2
#font-face {
font-family: 'Aileron_not_hinted';
src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
p{
font-size:11.8px
}
.nothinted{
font-family:'Aileron_not_hinted';
font-weight: 600;
}
<p>not hinted: <span class="nothinted">0123456789</span></p>
Expected result
Another benefit of this conversion is a smaller filesize due to woff2 more advanced file compression.
Related
I have 5 languages, when I change some of the languages, the font size is altering, my perfect font size is in google chrome, windows OS, and it is different in Mozilla windows, google chrome MAC OS, Mozilla MAC OS
I had similar(?) problem where English letters were bigger than Hebrew letters for some font. Since it's anyway for display purposes, I allowed myself to run a javascript on page load to fix it.
var EnglishCharFixer = {
do_body: function() {
this.do_elem(document.body);
},
do_elem: function(elem) {
var nodes = this.textNodesUnder(elem);
this.process_text_nodes(nodes)
},
textNodesUnder: function(node) {
var all = [];
for (node = node.firstChild; node; node = node.nextSibling) {
if (node.nodeType == 3) all.push(node);
else all = all.concat(this.textNodesUnder(node));
}
return all;
},
replace_node: function(node, str) {
var replacementNode = document.createElement('span');
replacementNode.innerHTML = str
node.parentNode.insertBefore(replacementNode, node);
node.parentNode.removeChild(node);
},
decorate_english: function(str, cls) {
var a = []
for (var i = 0; i < str.length; i++) {
var c = str.charAt(i);
if (c >= 'a' && c <= 'z' || c >= 'A' && c <= 'Z' || c == '#') {
a.push("<span class=\"" + cls + "\">" + c + "</span>")
} else {
a.push(c)
}
}
return a.join("")
},
process_text_nodes: function(nodes) {
for (var index = 0; index < nodes.length; index++) {
var node = nodes[index];
var value = node.nodeValue
var str = this.decorate_english(value, "eng2")
if (str != value) {
this.replace_node(node, str)
}
}
}
}
EnglishCharFixer.do_body();
div {
font-size: 24px;
}
.eng2 {
font-size: 50%;
}
<div>
Hello world שלום עולם
</div>
I have a third party library that add texts to my angular app, and I want to style it, unfortunately there is no class or specific element name to do css selector by.
My question is if is it possible to do css selector based on css property.
For example select all elements that are bold
I tried this but doesn't work and I get SassError: Expected identifier
ngx-contentful-rich-text {
line-height: 2rem;
*[font-weight=700] {
margin-top: 2rem;
}
}
You might want to use this:
var paragraphs = document.getElementsByTagName('p');
function change() {
var paragraphs = document.getElementsByTagName('p');
for (i = 0; i < paragraphs.length; i++) {
if (getComputedStyle(paragraphs[i]).fontWeight == 700) {
paragraphs[i].style.backgroundColor = '#00ff00';
}
}
}
Snippet:
function change() {
var paragraphs = document.getElementsByTagName('p');
for (i = 0; i < paragraphs.length; i++) {
if (getComputedStyle(paragraphs[i]).fontWeight == 700) {
paragraphs[i].style.backgroundColor = '#00ff00';
}
}
}
<button onclick="change()">Change!</button>
<p style="font-weight:400;">Will not change.</p>
<p style="font-weight:700;">Will change.</p>
As you know the data will be changeable. So, I would like to know how can I change the color of all last digits of a number only if there is a zero in the end or more.
for Example: 0.50 will be 0.50. 10.00 = 10.00. 10,000.00 = 10,000.00. 100,050.00 = 100,050.00 and so on. Thanks and any help would be greatly appreciated.
.num{
color: black;
font-size: 22px;
font-family: sans-serif;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>
You have to do some kind of DOM manipulation to make the styling. You can try the following way:
var nums = document.querySelectorAll('.num');
nums.forEach(function(n){
var s = n.textContent.split(/[,.0]+$/);
var m = n.textContent.match(/[,.0]+$/);
if(s && m && s.length > 0 && m.length > 0){
n.innerHTML = s[0] + '<span class=numStyle>'+m[0]+'</span>';
}
});
.num{
color: black;
font-size: 22px;
font-family: sans-serif;
}
.numStyle{
font-weight: bold;
opacity: 0.5;
color: red;
}
<div class="num">1.5</div>
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>
USING REGEX
function zeroHighligherWithRegex(str) {
var res = str.split(/(0(?:\n|\t|\s|0|,|\.)*)$/);
return res[0] + `<span class="highlight">${res[1]}</span>`;
}
WITHOUT USING REGEX
Find the last repeating zero list including . and ,
wrapping zero list in span
return the required number
zero highligher function
function zeroHighligher(textContent) {
let num = textContent;
let charList = num.split('');
let isContinuos = true;
let nonZeroNumList = [];
let zeroList = charList.reverse().map(num => {
if(isContinuos && (num === '0' || num === '.' || num === ',')) {
return num;
} else {
isContinuos = false;
nonZeroNumList.push(num);
}
});
let zeroNumString = zeroList.reverse().join('');
let nonZeroNumString = nonZeroNumList.reverse().join('');
const outputString = nonZeroNumString + `<span class="highlight">${zeroNumString}</span>`
return outputString;
}
to loop all the div elements
document.querySelectorAll('.num').forEach(elm => {
elm.innerHTML = zeroHighligherWithRegex(elm.textContent)
})
CSS
span.highlight {
font-weight: bolder;
}
Outputs
0.50
10.00
10,000.00
100,050.00
Demo
Using JS and the power of IIFE's you can do as follows:
(() => {
// Get all items
const items = document.getElementsByClassName('num');
// Iterate over those items to get text of each one
for (const item of items) {
const length = item.innerText.length;
const text = item.innerText;
let digits = 0;
// Iterate from end to start, you can access strings characters as it
// were an array, so if it finds anything that's not a
// comma, dot or zero, it will break the loop
for (var i = (length - 1); i >= 0; i--) {
if (text[i] === '0'
|| text[i] === '.'
|| text[i] === ','
) {
// Increment digits so you know hoy many yo have to change
digits++;
} else {
break;
}
}
// innerHTML to each one of your items
// the first part is to print normal substring
// second part prints from where you stopped to the end
item.innerHTML = `${text.substring(0, length-digits)}<b>${text.substring(length-digits, length)}</b>`
}
})();
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>
I gave two solutions, using method forEach(). With wrapping in a span tag with a class and in a strong tag.
I tried not to use variables inside the loop, in order for you to better understand how my code works.
let num = document.querySelectorAll(".num");
num.forEach(function(num_curr) {
num_curr.innerHTML = num_curr.textContent.replace(/.$/, '<span class="last-letter">' + num_curr.textContent[num_curr.textContent.length - 1] + "</span>");
});
.num {
color: black;
font-size: 22px;
font-family: sans-serif;
}
.last-letter {
font-weight: bold;
color: green;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>
This is a solution without a span tag with a class. The last character is wrapped in a strong tag, which makes the character bold.
let num = document.querySelectorAll(".num");
num.forEach(function(num_curr) {
num_curr.innerHTML = num_curr.textContent.replace(/.$/, '<strong>' + num_curr.textContent[num_curr.textContent.length - 1] + "</strong>");
});
.num {
color: black;
font-size: 22px;
font-family: sans-serif;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>
I am having some really weird issues with my static GridView Header. The lines in IE aren't lining up properly; some of them do, and others do not. Can some one help me out? It works perfectly in Chrome, just not IE.
Chrome:
IE:
Here is my relevant code.
<script type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 50) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.left = (tbl.clientLeft-25) +'px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.alignContent = 'center';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
//if (document.getElementById('DivHeaderRow').scrollLeft >= 300) {
// document.getElementById('DivHeaderRow').scrollLeft = 300;
//}
}
</script>
CSS
html, body {
margin:0px;
padding:0px;
width: 100%;
box-sizing: border-box;
}
CSS Header Style
.GVFixedHeader
{
font-weight: bold;
background-color: Green;
position: relative;
font-size: 12px;
text-align: left;
}
It has to do with how IE renders a GridView. I would custom change my formating on one cell of the table, but that would mess with IE and change the default settings. Chrome would correctly identify that I only wanted to add style not change completely.
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: inital;");
e.Row.Cells[i].Attributes.Add("style", "text-align: left;");//THIS IS WHAT I ADDED + some altering of the width of the JS
if (i == 1)
{
e.Row.Cells[i].Text = "Make Inactive?";
}
if (i == 9)
{
e.Row.Cells[i].Text = "Total Invoice YTD";
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
if (i == 13)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
}
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[i].Attributes.Add("style", "white-space: nowrap;"); } //ALWAYS makes sure there is no wrapping of text
}
I'm a noob and trying to implement a search method for a diagram.
The diagram is a chord diagram and was mostly adapted from here:
http://bl.ocks.org/mbostock/1044242
And the search function was taken from here:
http://mbostock.github.io/protovis/ex/treemap.html
My problem is that when it reads my file it interprets the text as: [object SVGTextElement] and so the only hit I have for my search is if I search [object SVGTextElement].
This is my entire code:
<html>
<head>
<title>I'm Cool</title>
<link rel="stylesheet" type="text/css" href="ex.css?3.2"/>
<script type="text/javascript" src="../protovis-r3.2.js"></script>
<script type="text/javascript" src="bla3.json"></script>
<style type="text/css">
.node {
font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
fill: #bbb;
}
.node:hover {
fill: #000;
}
.link {
stroke: steelblue;
stroke-opacity: 0.4;
fill: none;
pointer-events: none;
}
.node:hover,
.node--source,
.node--target {
font-weight: 700;
}
.node--source {
fill: #2ca02c;
}
.node--target {
fill: #d62728;
}
.link--source,
.link--target {
stroke-opacity: 1;
stroke-width: 2px;
}
.link--source {
stroke: #d62728;
}
.link--target {
stroke: #2ca02c;
}
#fig {
width: 860px;
}
#footer {
font: 24pt helvetica neue;
color: #666;
}
input {
font: 24pt helvetica neue;
background: none;
border: none;
outline: 0;
}
#title {
float: right;
text-align: right;
}
</style>
<body><div id="center"><div id="fig">
<div id="title"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var diameter = 800,
radius = diameter / 2,
innerRadius = radius - 160;
var cluster = d3.layout.cluster()
.size([360, innerRadius])
.sort(null)
.value(function(d) { return d.size; });
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial()
.interpolate("bundle")
.tension(.85)
.radius(function(d) { return d.y; })
.angle(function(d) { return d.x / 180 * Math.PI; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var link = svg.append("g").selectAll(".link"),
node = svg.append("g").selectAll(".node");
d3.json("bla3.json", function(error, classes) {
var nodes = cluster.nodes(packageHierarchy(classes)),
links = packageImports(nodes);
link = link
.data(bundle(links))
.enter().append("path")
.each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
.attr("class", "link")
.attr("d", line);
node = node
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
.attr("class", "node")
.attr("dx", function(d) { return d.x < 180 ? 12 : -12; })
.attr("dy", ".31em")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")" + (d.x < 180 ? "" : "rotate(180)"); })
.style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.text(function(d) { return d.key; })
.on("mouseover", mouseovered)
.on("mouseout", mouseouted);
});
function mouseovered(d) {
node
.each(function(n) { n.target = n.source = false; });
link
.classed("link--target", function(l) { if (l.target === d) return l.source.source = true; })
.classed("link--source", function(l) { if (l.source === d) return l.target.target = true; })
.filter(function(l) { return l.target === d || l.source === d; })
.each(function() { this.parentNode.appendChild(this); });
node
.classed("node--target", function(n) { return n.target; })
.classed("node--source", function(n) { return n.source; });
}
function mouseouted(d) {
link
.classed("link--target", false)
.classed("link--source", false);
node
.classed("node--target", false)
.classed("node--source", false);
}
d3.select(self.frameElement).style("height", diameter + "px");
// Lazily construct the package hierarchy from class names.
function packageHierarchy(classes) {
var map = {};
function find(name, data) {
var node = map[name], i;
if (!node) {
node = map[name] = data || {name: name, children: []};
if (name.length) {
node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
node.parent.children.push(node);
node.key = name.substring(i + 1);
}
}
return node;
}
classes.forEach(function(d) {
find(d.name, d);
});
return map[""];
}
// Return a list of imports for the given array of nodes.
function packageImports(node) {
var map = {},
imports = [];
// Compute a map from name to node.
node.forEach(function(d) {
map[d.name] = d;
});
// For each import, construct a link from the source to target node.
node.forEach(function(d) {
if (d.imports) d.imports.forEach(function(i) {
imports.push({source: map[d.name], target: map[i]});
});
});
return imports;
}
function title(d) {
return d.parentNode ? (title(d.parentNode) + "." + d.nodeName) : d.nodeName;
}
var re = "",
color = pv.Colors.category19().by(function(d) d.parentNode.nodeName)
node = pv.dom(bla3).root("bla3.json").node();
var vis = new pv.Panel()
.width(860)
.height(568);
cluster.bundle.add(pv.Panel)
.fillStyle(function(d) color(d).alpha(title(d).match(re) ? 1 : .2))
.strokeStyle("#fff")
.lineWidth(1)
.antialias(false);
cluster.bundle.add(pv.Label)
.textStyle(function(d) pv.rgb(0, 0, 0, title(d).match(re) ? 1 : .2));
vis.render();
/** Counts the number of matching classes, updating the title element. */
function count() {
var classes = 0, bytes = 0, total = 0;
for (var i = 0; i < node.length; i++) {
var n = node[i];
if(n.firstChild) continue;
total += n.nodeValue;
if (title(n).match(re)) {
classes++;
bytes += n.nodeValue;
}
}
var percent = bytes / total * 100;
document.getElementById("title").innerHTML
= classes + " classes found "+n;
}
/** Updates the visualization and count when a new query is entered. */
function update(query) {
if (query != re) {
re = new RegExp(query, "i");
count();
vis.render();
}
}
count();
</script>
<div id="footer">
<label for="search">search: </label>
<input type="text" id="search" onkeyup="update(this.value)">
</div>
</div></div></body>
</html>
The input is bla3.json and looks like this:
[{"name":"A.Patient Intake","imports":["E.Name","C.injury","E.DOB","E.Email","Progress","B.Obtain Brief Medical History","Perform Physical Exam","Perform Subjective Patient Evaluation"]},
{"name":"C.injury","imports":[]},
{"name":"E.Name","imports":[]},
{"name":"E.Email","imports":[]},
...
I didn't put the whole thing but it shouldn't matter...
My purpose is of course to have a search function that I could type, for example, "Patient Intake" and it will highlight that chord (or just the name):
Any ideas of how to go about this?
I would approach this in a completely different way to what you're currently doing. I would filter the data based on the query (not the DOM elements) and then use D3's data matching to determine what to highlight. In code, this would look something like this.
function update(query) {
if (query != re) {
re = new RegExp(query, "i");
var matching = classes.filter(function(d) { return d.name.match(re); });
d3.selectAll("text.node").data(matching, function(d) { return d.name; })
// do something with the nodes
// can be source or target in links, so we use a different method here
links.filter(function(d) {
var ret = false;
matching.forEach(function(e) {
ret = ret || e.name == d.source.name || e.name == d.target.name;
});
return ret;
})
// do something with the links
}
}