Find UIWebview's content height before loading it - uiwebview

I have a couple of custom cells and web views inside each of these cells. Now,my requirement is to find the height of the HTML string to be loaded on the webview, then based on this change the Custom cell height and the webview height.
I am aware that the document's height can be found in the -webViewDidFinishLoading delegate, but in my app i have a lot of cells and webviews inside each of these cells, so i feel that the app would slow up while scrolling and making unnecessary callbacks
At present i am doing this which gives me the string height.
-(float)getDynemicHeight:(NSString *)pstrText
{
CGSize constraint = CGSizeMake(683,600);
CGSize size = [pstrText sizeWithFont:[UIFont systemFontOfSize:18] constrainedToSize:constraint lineBreakMode:UILineBreakModeWordWrap];
CGFloat height = MAX(size.height, 44.0f);
if (height>400) {
return 400;
}
return height;
}
This however causes a problem as even <div> elements are considered as string and hence a larger value of height is returned

In iOS 6, if you just want to show styled text (not text with images mixed in or something like that), you might like to use NSAttributedString instead of a web view. It allows you to create text with different styles in different stretches of text, paragraph margins, etc. etc. Its metrics are well defined and it comes with measurement methods. Simple UIView subclasses such as UILabel can now display an attributed string. Or you can just draw it yourself, directly into the interface.
http://www.apeth.com/iOSBook/ch23.html#_attributed_strings
If you can't do that, then what you're trying to do is basically impossible. You don't know how the Web view will draw a piece of complex HTML until it has drawn the complex piece of HTML. You will simply have to change your app's architecture. For example you could draw all the Web views way ahead of time so you have the needed info during table-dataSource time.

Related

WebGL: Text rendering and blend issue

Hy
I have a rendering issue with text in WebGL.
Here the pb:
The first rendering is crappy the second is OK.
The difference is my DOM (nothing related to the HTML DOM):
The difference between the view V2 and V3 is:
V2 is just a green rectangle (composed of 2 GL triangles) and contains a DOM child V4 which is a Text View (means a text, render into a Canvas then copy into a texture)
The blend is done by the GPU
V3 is TextView with a green background. The text is rendered into a Canvas then into a texture (like the V4). And a Shader fill the rectangle and takes the texture to generate the final view => no blend (actually done by the shader)
It should be a problem of blend and texture configuration. But I cannot find the right configuration.
Here my default configuration for the blend:
gl_ctx.disable (gl_ctx.DEPTH_TEST);
gl_ctx.enable (gl_ctx.BLEND);
gl_ctx.blendFunc (gl_ctx.SRC_ALPHA, gl_ctx.ONE_MINUS_SRC_ALPHA);
gl_ctx.clearDepth (1.0);
gl_ctx.clearColor (1, 1, 1, 1);
Thanks in advance for your help.
NOTE 1: A view (Vn) is the basic document object into my WebGL toolkit. It's called internally a Sprite, it's composed basically by 4 vertices, and a vertex and fragment shaders are associated to it, for the rendering purpose.
NOTE 2: If I use this blend configuration:
gl_ctx.blendFunc (gl_ctx.ONE, gl_ctx.ONE_MINUS_SRC_ALPHA);
The text rendering works well but the rest of rendering, specially images had incorrect alpha.
NOTE 3: sorry dont have enough reputation(!!!) to include image in my post :-(
Canvas 2D always uses pre-multiplied alpha so you pretty much have to use the second blendfunc. Can you set that blendfunc just when you render text?

Using a Webview in a splitview controller

I'm having trouble displaying content properly in a splitview application. In the detail view I have a webview and I'm loading locally saved html files. However the files don't display properly - they are slightly zoomed in and missing detail on the left and right. Double taping them zooms them out and they display correctly. I have scaletofitpages=YES set.
Any advice?
Well, if i'm understanding you correctly, you can use auto layout.. it will fit your content from left and right.
to set the font size you must edit your html content add "css style" to them...
// Get result into string format
NSString *htmlData = [objSQLiteProtocol getDatabaseResults:fileNameToRead];
// reduce the size of font to set in iPad
htmlData = [htmlData stringByReplacingOccurrencesOfString:#"25pt" withString:#"12pt"];
[moreWebView loadHTMLString:htmlData baseURL:nil];
moreWebView.scalesPageToFit = YES;

How can I set the text to the same relative size in iPhone's Safari and any desktop browser?

I want to build a website that looks exactly the same across all screen width's, which means the whole website will scale according to the screen's, or more accurately, the viewport's width.
This is relatively easy to do for SVG images and I have all images correctly scaling according to the viewport's width. The viewport's width is the point of reference, from which all images scale. However, the point of reference for the text is different between any desktop browser and the iPhone's Safari (and I assume any mobile browser).
According to my research there seem to be two possible reasons for different sized text: a difference in the default CSS's or a difference in the rendering engines. Since I can't find any reference to pixel sized text on Chrome's default CSS or Firefox's default CSS, I assume this setting comes from the rendering engine.
My IP is dynamic so I can't provide a live example, but here are the screens comparing the same site in iPhone's Safari and Chrome on the desktop. Notice the huge difference in the size of the text.
Is there any way I can make the text have the same relative size in both these browsers?
I found the answer in JavaScript:
onresize=onload=function(){
document.body.style.fontSize=window.innerWidth/20+"px"
}
which sets the text size according to the viewport's width on the body element. Since all the text set in em's is sized in relation to their parents, all the text is sized correctly from the body element.
Furthermore, if you want to avoid the cascading hell by using rems and respect the original layout design from a let's say 1024px width you can stick with this:
onresize = onload = function(){
document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}
You should try CSS Unit vw, like this:
body { font-size: 1.5vw; }
However, i am not sure it is supported by mobile browsers...
EDIT
Check for browser compatibility here.

JavaFX HTML styling (or equivalent) labels

In Swing, it was trivially easy to style a JLabel using HTML - you simply used the HTML you wanted as the text for the label, and it was rendered appropriately.
In JavaFX this isn't available, but we can set the style of a particular label (or node in general) using the setStyle() method.
However, using this approach it's not obvious how to set part of a label to be a certain style, for instance the equivalent of:
JLabel label = new JLabel("<html>Part of this <b>text is b</b>old and part isn't.</html>");
What would be the easiest way to achieve something like the above?
You can try using TextFlow to combine different styled text nodes like
TextFlow textFlow = new TextFlow();
Text first=new Text("Part of this ");
first.setStyle("-fx-font-weight: regular");
Text second=new Text("text is b");
second.setStyle("-fx-font-weight: bold");
Text third=new Text("old and part isn't.");
third.setStyle("-fx-font-weight: regular");
textFlow.getChildren().addAll(first, second, third);
Pseudo-selectors could have been a work-around but unfortunately most of them are not supported yet - http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#introlimitations. As for Rich Text Support in controls, they will be provided by JavaFX8 - https://bugs.openjdk.java.net/browse/JDK-8091709.

What manager is suggested for Gallery Manager?

I am working on implementing a gallery, I tried GridFieldManager for this, but the images of the thumbnail are not of same size. I sneaked through the gridfieldclass but there are no methods for making the cell size of each image constant.
Is it worth to use flowfieldmnager? When I tried overriding sublayout method for the above two managers it is not giving the desired reults.
Is it possible to sublayout flowfieldmanager?
Device : Blackberry 9780, OS 6.0
The below image is the desired result I am trying to get
I advice you to use a simple FlowFieldManager. But instead of BitmapField inside it, extend a Field to do the following:
setExtent to 1/4 of the Display width in the sublayout method
draw your own focus in the border of the image
draw your own borders and draw the image in the center of the field's extent

Resources