On my iPhone 7 in Safari a 3in wide div is about 1.8in in real.
Why didn't they set devicePixelRatio so that 3in in css are 3in in real?
Is there a specification on how to set devicePixelRatio?
Is there a workaround?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body style="margin:0">
<div style="width:3in;background:orange">3in</div>
</body>
</html>
The CSS units such as inch and cm are not recommended to use according to w3.org, except you're planning to print out your webpage:
The only place where you could use pt (or cm or in) for setting a font size is in style sheets for print, if you need to be sure the printed font is exactly a certain size. But even there using the default font size is usually better.
If you really need to use inches as units, please take a look at this answer here
Related
in HTML, we can have a clickable image like this :
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
<img src="https://www.w3schools.com/html/pic_trulli.jpg">
</body>
</html>
you can click everywhere and you redirect to the website .also in LaTeX, we can have a clickable image like this
\documentclass[10pt,a4paper]{article}
\usepackage{hyperref,graphicx}
\begin{document}
\href{http://www.blog.com}{\includegraphics{blog}}
\end{document}
but the problem is The whole image is not clickable,there is a small point left-hand side it is very small.
i want the image can be clickable like fonts and text all-over the image
\href{http://www.blog.com}{Hello}
\Huge\href{http://www.blog.com}{\faGithub}
my editor is : TeXstudio 4.1.2 (git n/a)
Using Qt Version 5.12.8, compiled with Qt 5.12.8 R
latex compiler is : XeLaTeX
thanks
xelatex does not support non-text hyperlinks. The easiest solution is to use another engine. For example lualatex can do pretty much everything that xelatex can do.
(For the odd case in which changing the engine is not an option, there are workaround for to make non-text elements clickable, see e.g. https://github.com/josephwright/beamer/issues/332#issuecomment-774659976 )
When building my website, i faced an image with some text in it.
But the text only display when i changed background-color to black.
After some research, i think ít's a transparent image, and we have some online tools to replace background image.
Anyone know how remove background from an image really work ?
And why it make the text showed up ?
This is my image.
updated: Sorry, my question is not clear. Here is my code
https://codepen.io/ging2507/pen/wvWJeyR
when i remove comment of navbar, the Text of image show up(not the normal text 123131). And i dont know why this happened
.navbar {
background-color: #14425D;
}
The image doesn't change at all. It just has some pixels that are marked as transparent.
Consider a sheet of glass. Paint on it using white paint. Put it on a sheet of white paper. Now you can't see what was painted on it. Replace the white paper with black paper. Not you can see what was painted on it.
I am not sure if I understand your question correctly. You have an image that you want to remove the grey background from? I have tried to use this tool and this is the following output that I got. The text cannot be read since it is it white and blends together with the background. I hope this helped
Edit: The tool that I have posted can also replace the background as you can see here
EDIT
You can also use CSS to add background to the image.
I have mananged to add linear gradient to the image using CSS. You can see the code
.logo {
background: linear-gradient(
105deg,
rgba(34, 193, 195, 1) 0%,
rgba(253, 187, 45, 1) 100%
);
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<img src="https://i.stack.imgur.com/Pawab.png" alt="some logo" class="logo">
</body>
</html>
Here is a link to codepen if you want to play around with it.
I do want to display some text inside 3D box image using aframe in ar.js.
Following is the HTML code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/examples/vendor/aframe/build/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"></script>
<!-- <script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script> -->
</head>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='trackingMethod: best;'>
<a-anchor hit-testing-enabled='true'>
<a-box position='0 0.5 0' material='opacity: 0.5;'>
<a-entity text="value: HELLO"></a-entity>
</a-box>
</a-anchor>
<a-camera-static/>
</a-scene>
</body>
</html>
My main task is to project some dynamic text inside the 3D box. But for instance, I am trying to put some static text. But unable to do so. Does anybody know how can I add text inside the box?
actually Your code is working, but both the box, and text are white + the text is really small:
If You enlarge it a bit + make it black, it would be apparent, that it is there:
<a-entity position="1 0 0" scale="3 3 3" text="value: HELLO;color:black"></a-entity>
I've been toying around with iPad and HTML5 but since the display is retina, the text on my screen seems to be of low resolution. As do lines drawn with lineTo/moveTo/stroke. Note the text is drawn with context.fillText()
I suspect this is just because I haven't set up the canvas correctly to handle the retina pixel ratio, so hopefully someone here can figure out what exactly I'm doing wrong.
I have set up the canvas as follows:
<div id="container">
<canvas id="canvas"></canvas>
</div>
With CSS attributes:
#canvas {
width: 1024px;
height: 768px;
}
#container {
width: 1024px;
height: 768px;
}
and in JavaScript (as I have seen to do on the internet) I have specified:
canvas.width = 2048;
canvas.height = 1536;
Unfortunately this does not stop the pixelation as it has for some other users.
Am I missing something or have I specified something incorrectly?
Try adding this line to your page head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tag makes sure that the page is shown in its original size, and remains in that size.
I have a simple HTML5 webapp that uses javascript to create a canvas context and draw a simple image of a caret (^) which is then referenced in the definition of a CSS class to render the image on multiple tags.
The application displays fine in a browser: have tried Google Chrome (Win7), Mobile Safari (iPad IOS4 & IOS5, iPod (IOS4 & IOS5).
But if on the iPad or iPod I "Add to Homescreen" and then launch the webapp the ^ image is not rendered onto the .
I am aware there are differences in the way HTML5 is rendered when launched from the homescreen as opposed to viewed in Safari, but my searches haven't turned up anything that would indicate that this shouldn't work.
I would appreciate if anyone could shed some light on this for me.
Code sample below:
**(index.html)**
<html>
<head>
<link rel="stylesheet" href="styles/main.css" >
<script src="scripts/main.js"></script>
</head>
<body>
<div class="scoreboard-item-wrapper">
<div class="scoreboard-item">
<div class="box" ><button id="btn_homegoalup" class="up" onclick="incAction(true,true)"></button>
</div>
</div>
</div>
</body>
</html>
**(main.js)**
initChevronUp("chevron-up", "hsl(228, 1%, 50%)");
function initChevronUp(id, style) {
var context = document.getCSSCanvasContext("2d", id, 22, 13);
context.save();
context.translate(4,0);
context.clearRect(0, 0, 20, 13);
context.strokeStyle = style;
context.lineWidth = 3;
context.beginPath();
context.moveTo(1, 9);
context.lineTo(6.5, 1);
context.lineTo(12, 9);
context.stroke();
context.restore();
}
**(main.css)**
.scoreboard-item .box button.up{
background:
-webkit-gradient(linear,left top, left bottom,
from(rgba(255, 255, 255, .25)), to(transparent) ),
-webkit-canvas(chevron-up) center center no-repeat transparent;
}
try to write the full URL for CSS and javascript files.
The relative path you have is getting safari to look for files locally.