Here's a UILabel which says "About". Set at exactly 17.7 in iOS.
Below it a UIWebView which also says "About". Also set at exactly 17.7 using css.
They don't match.
How to fix this correctly?
It is bizarre that in Apple's own UIWebView, the size basis is different?
Html to test...
<html><head>
<style type='text/css'>
body {
margin: 0px;
font-family: 'SourceSansPro-Light';
font-size: FONTPOINTSpt;
}
html { -webkit-text-size-adjust:none; }
</style></head>
<body leftmargin=0 topmargin=0>
About
</body></html>
Behavior is identical on device or simulator.
(Note, from here I learned the ratio is, perhaps 72.0/96.0.)
If you want a 1 to 1 relationship between the font size that the UILabel uses and the font size that the UIWebView uses (via CSS) you have to use px instead of pt when defining the font size in your CSS.
Checkout this example HTML / CSS:
<html>
<head>
<style type='text/css'>
body {
font-family: 'SourceSansPro-Regular';
padding: 0
}
.point {
font-size: 17pt
}
.pixel {
font-size: 17px
}
</style>
</head>
<body>
<p class="point">About (17pt)<p>
<p class="pixel">About (17px)</p>
</body>
</html>
When you add a UIWebView and a UILabel to your UIViewController and load the above HTML to the UIWebView and set the same font to the UILabel:
override func viewDidLoad() {
super.viewDidLoad()
let webView = UIWebView(frame: CGRect(x: 25, y: 50, width:325 , height: 90))
view.addSubview(webView)
let filePath = NSBundle.mainBundle().URLForResource("test", withExtension: "html")
webView.loadRequest(NSURLRequest(URL: filePath!))
let label = UILabel(frame: CGRect(x: 25, y: 150, width: 325, height: 40))
label.font = UIFont(name: "SourceSansPro-Regular", size: 17)
label.text = "About (UILabel set to 17)"
view.addSubview(label)
}
You get the following output:
I think your confusion was because CSS pt is a typographic point (1/72 in), but Apple's iOS documentation uses "point" (e.g. UIFont.pointSize) as "virtual pixel", which corresponds to CSS px. Judging from #joern's answer, it looks like UIWebView uses 1 css px = 1 ios virtual px. (I have not tested this.) However, in my tests with WKWebView, it looks like CSS px is equal to one device pixel. So for WKWebView, you want:
let fontSize = UIScreen.main.scale * label.font.pointSize
let cssStr = String(format:"font-size: %.1fpx;", fontSize)
Yep, its a parent font-size issue:
You should always set the font-size for body to 16px (one can set it higher if a larger base font is required, the standard is 16px).
Then, set font sizes using 16px as the base.
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
If you want both the body and the h1 font-sizes to be the same then simply set the body font-size and don't set the font-size of the h1 (it will inherit the body font-size all on its own... aka... cascading).
body {
font-size: 16px;
}
h1 {
}
What you have done is set the body font-size to a value... then set the h1 font-size to that same value, the problem is that h1 inherits the font-size from body and then goes even bigger when you assign a font-size to h1.
Hope this makes sense and helps.
Related
If I inspect the img in Safari Mobile / iOS using the debug dev tools, it shows a very tall and slender rectangle that is 320px-ish wide (width of iPhone) but 3000px tall. The image isn't stretched however, it's aspect ratio visibly is maintained, so it looks right. But what is wrong is that the image is 3000px in height. It should be 320px in height (for square image in this case). What am I missing here?
body {
width: 100vw;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
position: static;
}
section {
width: 100vw;
display: flex;
padding: 64px;
}
<body>
<section>
<img src="myimg.svg" width='100%'>
</section>
</body>
I am also rotating the image in CSS, if that makes a difference, using transform: rotate(...) in an animation.
You must specify height: auto for the img to ensure scaling to width because the image's original height will be applied.
<img src="myimg.svg" width='100%' style="height: auto;">
I have an app built using Vuetify.
One of the pages is used for orders and I want the user to be able to print it.
The problem is that if I have scroll in the page, only the first page shows with a scrollbar:
How can I make it display all other pages for print?
UPDATE
I have a .scroll-y class on the main section, if I use this css for print:
#media print{
body,
html {
height: 5000px !important;
}
.scroll-y {
height: 100% !important;
}
}
it works, but obviously i don't want a set height of 5000px for every print,
I can use js to calculate the height and set it but I'm wondering if there is a better/easier way?
You have to change CSS, adding something like this:
#media print {
body {
overflow: auto;
height: auto;
}
.scroll-y {
height: auto;
overflow: visible;
}
}
So .scroll-y occupied all space needed, and body will grow up to right printed size.
Of course you must adds html elements for printing page break, preview print of your view on typical print size (i.e. A4) and adding where need an breakup print element as
<div class="print-break-page"></div>
with css:
.print-break-page {
page-break-after: always;
}
You have to change the overflow and the height of the main section (the body on my example):
#media print {
body {
overflow: auto;
height: auto;
}
}
Link to the demo on codepen:
https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (you can export it form there)
Thanks to #Ander and #g.annunziata for pointing me in the right direction, the final setup that worked for me was:
body,
.scroll-y {
overflow: visible !important;
height: auto !important;
}
Greetings. I'm trying to use two programmatically created Navigation Bar Button Items (the smaller and the larger "A"s in the image above) to allow readers to increase or decrease the size of the text displayed in the WKWebView in an app for iPhones and iPads.
In the view controller, I have the following import statements:
import UIKit
import WebKit
In viewDidLoad, I have the following for creating the two Navigation Bar Button icons:
let button1 = UIBarButtonItem(image: UIImage(named: "A_16x16"), style: .plain, target: self, action:#selector(decreaseFontSize))
let button2 = UIBarButtonItem(image: UIImage(named: "A_28x28"), style: .plain, target: self, action:#selector(increaseFontSize))
self.navigationItem.rightBarButtonItems = [button2, button1]
I also have started the following functions:
func decreaseFontSize(_ button:UIBarButtonItem!) {
fontSize = (fontSize > 14) ? fontSize-6 : fontSize
let fontSpecifier = "document.body.style.fontSize = '" + String(fontSize) + "px'"
print("decrease font size button pressed")
print(fontSpecifier)
textWebView.evaluateJavaScript(fontSpecifier, completionHandler: nil)
}
func increaseFontSize(_ button:UIBarButtonItem!) {
fontSize = (fontSize < 50) ? fontSize+6 : fontSize
let fontSpecifier = "document.body.style.fontSize = '" + String(fontSize) + "px'"
print("increase font size button pressed")
print(fontSpecifier)
//textWebView.evaluateJavaScript("document.body.style.fontSize = '40px'", completionHandler: nil)
textWebView.evaluateJavaScript(fontSpecifier, completionHandler: nil)
}
The CSS for the HTML texts includes these styles:
body {
color: black;
background: white;
font-size: 1.2em; /*20px; but use em */
text-align: left;
font-family: "MyCustomFont", sans-serif;
margin-right: 8px;
margin-left: 8px;
}
This works somewhat, but "MyCustomFont" (or MyCustomFont without quotes) is ignored. I so would love to have the custom font displayed.
Any guidance or proposed solutions would be appreciated.
Thanks to Aditya Deshmane's answer to Using custom fonts in WKWebView I put this at the top of my CSS file and my custom font is displayed:
#font-face {
font-family: 'MyCustomFont';
src: local('MyCustomFont'),url('MyCustomFont.ttf') format('truetype');
}
The icons seem to adjust the font size as desired in my iPad-mini 4 but "work" somewhat inconsistently in my iPhone 6. I'm not yet accepting this, my own answer, as "the accepted answer" as there is room for improvement.
I have a UIWebView. I want to print the contents of it using AirPrint. I came up with this code:
#IBAction func print(_ sender: Any) {
let printController = UIPrintInteractionController.shared
let printInfo = UIPrintInfo(dictionary:nil)
printInfo.outputType = UIPrintInfoOutputType.general
printInfo.jobName = "some name"
printController.printInfo = printInfo
let formatter = webView.viewPrintFormatter()
formatter.perPageContentInsets = UIEdgeInsets(top: 72, left: 72, bottom: 72, right: 72)
printController.printFormatter = formatter
printController.present(animated: true, completionHandler: nil)
}
When I run the app, a print interaction controller and everything works.
However, I have things like these in the html because I want to emphasize some text:
<span style="color: #ff0000">some text</span>
"some text" appears red in the web view, but it is black when I look at the preview in the print interaction controller! In other words, all the colors are gone!
I tried to change the HTML to:
<span style="background: #ff0000">some text</span>
but the print preview appears the same. I was very surprised because the <hr> and <h3> tags all rendered fine in the preview.
Is there a way to print colored text?
Notes:
I did select the "Simulated Color Laser Printer"
I know I can take a screenshot of the webview and print it. But wouldn't that print only the part of the HTML that's showing on the screen?
Take a look at this section of your CSS:
#media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
This #media print section defines extra rules for how your content looks when it is printed. link
Within this section you have a *:after element which applies content after every element on your page. link
Within the *:after section you declare a color of black (#000), even making doubly sure of black, by declaring this color as !important - giving this declaration more weight than any declaration of color in the element itself. link
So you have several options for resolving this:
Simply remove the !important tag from the color line:
color: #000;
Remove the whole color line from your CSS.
Remove the *:after section from your CSS.
Remove the #media print section from your CSS.
It all depends on what you were specifically after.
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.