mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
text-decoration tests
This commit is contained in:
Niklas von Hertzen
parent
78871e7b28
commit
9553ab54fd
@ -6,7 +6,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<title>Text-decoration:line-through tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
|
||||
@ -15,7 +15,22 @@
|
||||
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).ready(function() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
|
||||
for(var i=0;i<=20;i++){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
window.setTimeout(function(){
|
||||
$('body').html2canvas();
|
||||
},100);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -30,100 +45,23 @@
|
||||
.large{
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
div{
|
||||
float:left;
|
||||
text-decoration:line-through;
|
||||
|
||||
}
|
||||
|
||||
.lineheight{
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear:both;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body> <h1><h1> text-decoration</h1>
|
||||
<div style="font-family:Arial;">
|
||||
<h2>Arial</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Verdana;">
|
||||
<h2>Verdana</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Tahoma;">
|
||||
<h2>Tahoma</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
<h3><h3> misc text alignments</h3>
|
||||
<ul>
|
||||
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
|
||||
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
|
||||
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
|
||||
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
|
||||
<li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
|
||||
</ul>
|
||||
|
||||
<body>
|
||||
Creating content through JavaScript
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<title>Text-decoration:underline tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
|
||||
@ -15,7 +15,22 @@
|
||||
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).ready(function() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
|
||||
for(var i=0;i<=20;i++){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.setTimeout(function(){
|
||||
$('body').html2canvas();
|
||||
},100);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -30,100 +45,21 @@
|
||||
.large{
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
div{
|
||||
float:left;
|
||||
text-decoration:underline;
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
clear:both;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body> <h1><h1> text-decoration</h1>
|
||||
<div style="font-family:Arial;">
|
||||
<h2>Arial</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Verdana;">
|
||||
<h2>Verdana</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Tahoma;">
|
||||
<h2>Tahoma</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
<h3><h3> misc text alignments</h3>
|
||||
<ul>
|
||||
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
|
||||
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
|
||||
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
|
||||
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
|
||||
<li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
|
||||
</ul>
|
||||
|
||||
<body>
|
||||
Creating content through JavaScript
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text tests</title>
|
||||
<title>Text-decoration:underline tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
|
||||
@ -15,7 +15,22 @@
|
||||
<script type="text/javascript" src="../build/jquery.plugin.html2canvas.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(window).ready(function() {
|
||||
$('body').empty();
|
||||
$.each(['arial','verdana','tahoma','courier new'],function(i,e){
|
||||
|
||||
var div = $('<div />').css('font-family',e).appendTo('body');
|
||||
|
||||
for(var i=0;i<=20;i++){
|
||||
$('<div />').text('Testing texts').css('margin-top',1).css('border','1px solid black').css('font-size',(16+i*6)).appendTo(div);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.setTimeout(function(){
|
||||
$('body').html2canvas();
|
||||
},100);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -30,100 +45,23 @@
|
||||
.large{
|
||||
font-size:24px;
|
||||
}
|
||||
|
||||
div{
|
||||
float:left;
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
|
||||
.lineheight{
|
||||
line-height:40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear:both;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body> <h1><h1> text-decoration</h1>
|
||||
<div style="font-family:Arial;">
|
||||
<h2>Arial</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Verdana;">
|
||||
<h2>Verdana</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div style="font-family:Tahoma;">
|
||||
<h2>Tahoma</h2>
|
||||
<ol class="small">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
|
||||
<ol class="medium">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
<ol class="large">
|
||||
<li style="text-decoration:none;">text-decoration:none;</li>
|
||||
<li style="text-decoration:underline;">text-decoration:underline;</li>
|
||||
<li style="text-decoration:overline;">text-decoration:overline;</li>
|
||||
<li style="text-decoration:line-through;">text-decoration:line-through;</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
<h3><h3> misc text alignments</h3>
|
||||
<ul>
|
||||
<li style="word-spacing:5px;">word-spacing:5px; (as each letter is rendered individually, the bounds will always be correct)</li>
|
||||
<li style="line-height:35px;">line-height:35px; <br />(same goes for line-height)</li>
|
||||
<li style="letter-spacing:5px;">letter-spacing:5px;</li>
|
||||
<li style="text-align:right;width:300px;">text-align:right;width:300px;</li>
|
||||
<li style="font-variant:small-caps;">font-variant:small-caps; (not yet supported)</li>
|
||||
</ul>
|
||||
|
||||
<body>
|
||||
Creating content through JavaScript
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user