I'm trying to stylize some text for my company's homepage. The text looks great in IE8 but does not look so good in Firefox or Chrome.
In firefox it looks like there is a few extra white pixels to the right of each character.
In chrome the effect is similar, but does not happen for all letters.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/raphael-min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var paper = Raphael(10, 0, 600, 400);
var lbl = paper.text(135, 40, "AaEeIiOoUuYy").attr( {
"font" : '36px Franklin Gothic Medium, Helvetica, Arial',
stroke : "#000",
fill : '#ffffff',
'font-weight' : 'bold',
'text-anchor' : 'start',
'stroke-opacity' : .9
});
var lbl = paper.text(0, 90, "AaEeIiOoUuYy").attr( {
"font" : '62px Franklin Gothic Medium, Helvetica, Arial',
stroke : "#000",
fill : '#ffffff',
'font-weight' : 'bold',
'text-anchor' : 'start',
'stroke-opacity' : .9
});
}
</script>
<style type="text/css">
#page
{
background: #000;
width:100%;
height: 600px;
}
</style>
</head>
<body>
<div id="page">
</div>
</body>
</html>
Here are images showing the issue :
Firefox
IE8
Chrome
I'm using Raphael 1.5.2. Thanks!
EDIT:
I'm also open to any other cross-browser solution that allows me to display a specific font with a thin black outline (stroke).
If you set the stroke colour to the same as the fill, it'll hide the slight rendering fault.
You should be aware that IE uses it's own vector rendering engine called VML rather than SVG. Raphael does a great job of hiding most of the differences for you but not all. The VML renderer has a number of bugs, that worst of which for your use is that IE7 will ignore the specified font family and always use Arial.
I ended up ditching raphael and using font-shadow for firefox/chrome, and a slight Glow filter for IE. This fixes my problem for all major browsers.
Related
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
I am trying to place the HOT element with (height:100%) inside position:fixed container.
But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.
I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.
var ex = $('#example').parent();
$('#example').height(ex.height());
It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 100000.
<!DOCTYPE html>
<html>
<head>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
<div style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
<div id="example" style="overflow:auto; height:100%"></div>
</div>
</div>
<script type="text/javascript">
var data = Handsontable.helper.createSpreadsheetData(100000, 10);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
stretchH: 'all',
contextMenu: true
});
</script>
</body>
</html>
Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?
Thanks
I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:
let height = $(window).height() - $("#hot-container").offset().top;
And if you want it to always keep the 100% height, even on resize, then add:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
my jvector maps are in a dropdown menu, it works well in safari, opera and chrome but breaks
(no map
and error message NS_ERROR_FAILURE:
(line 700 in 2.0.2.min.js "return this.node.getBBox();"
in firefox, I've tried lots of different things but no luck.
these are in the head.
<script type="text/javascript" src="jVectormap/jquery-jvectormap-2.0.2.min.js"></script>
<script type="text/javascript" src="../maCountries/be_coord.js"></script>
<script type="text/javascript" src="../maCountries/be_map.js"></script>
this is the html in the dropdown menu
<div id="mapJV">
</div> <!--mapjv container-->
This is the code in be_map.js which breaks in firefox.
$(function() {
var map,
map = new jvm.Map({
container: $('#mapJV'),
map: 'be_mill_en',
backgroundColor: '#F6F3EF',
regionStyle: {
initial: {
fill: '#ABBDC4'
},
},
});
});
$( "<style>.jvectormap-container {width : 400px; height: 400px;}</style>" ).appendTo( "head" );
the code in be_coord.js is just the normal coordinates.
Firefox usually has trouble with rendering SVG inside of the hidden elements. So solution here could be creating and rendering map after its container getting visible.
This is a piece of HTML that demonstrates the problem:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>canvas fillText()</title>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "40px sans serif ";
context.lineWidth = 3;
context.strokeStyle = "blue";
context.strokeText("Hello World!", 40, 40);
context.fillStyle = "black";
context.fillText("Hello World!", 40, 80);
</script>
</body>
</html>
While other browsers show both the outlined and solid text, FF27 does not render the text using fillText().
Any suggestions? Thanks.
I am unable to comment due to reputation limitations, but I am running into the same issue :(. Unable to draw filled text in Firefox 27.0.1 on Windows 7 Pro SP1. I tried changing the fillStyle property to '#000', '#000000', 'black', 'rgb(0,0,0)', 'rgba(0,0,0,.8)'. I also attempted to use the deprecated functions 'mozDrawText' and 'mozPathText', both of which have been removed from the API. Please answer your post if you figure out a workaround. For now, I guess I will just call both strokeText and fillText with black, and hope nobody notices the hollow text in Firefox.
Just so you know, I reported this as a bug at:
https://bugzilla.mozilla.org/show_bug.cgi?id=982837
The issue has been resolved in FireFox 30.0, AFAICT.
Has anyone had any luck with this?
I copied and pasted the exact example code here http://www.jqplot.com/deploy/dist/examples/barTest.html into my text editor. I added all the .js files and .css file required. when I run the page in any browser, I am not seeing the bars or the animation. I have looked at the source code on the above URL as well to see how it works. Could someone tell me why I can the animated bar chart on the URL but not from my desktop? What's different? Here is the exact code I copied:
<html>
<title>Untitled Document</title>
<link rel="stylesheet" href="js/jquery.jqplot.min.css" type="text/css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
<script>
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: { show: false }
});
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
</script>
</head>
<body>
<div id="chart1" style="margin-top: 20px; margin-left: 20px;width: 300px; height: 300px; position: relative;"></div>
<div><span>Moused Over: </span><span id="info1">Nothing</span></div>
</body>
</html>
here is what I see in the browser after running that code:
Thanks
For anyone interested, I've found the answer. The example code taken from the barchart.html page in my post doesn't appear to need the conditional syntax (below) in order to animate the bars:
$.jqplot.config.enablePlugins = true;
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
From the animate example on the examples page , the following code will do the trick:
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
I read the entire documentation and was doing a lot of playing around with the code. Eventually, I got to the full "examples" page (not the few listed on the tests and examples page which I initially viewed since it was listed first in the documentation). I really wanted to understand the plugin code since the developer took so much time to really provide a ton of info, comments and updates to his code base.