very quick one, I was always wondering, do internet browsers use for rendering OS API functions to create buttons, render mages and so, or do they render it all on their own?
I first thoght that it uses system api, but there are some effects like when screen fades into grey and you see only small window in the middle, you know, thet effect used on many picture albums online, which I dont really how to achive using for example only Win32 calls.
EDIT: To be more exact, I know that final drawing on screen will always use system API, but you can send prerendered image as you want to it. Thanks.
Web browsers use their own rendering engines rather than OS API. Using OS API to render buttons totally depends on the design decision of a particular rendering engine. However, to run on various operating systems these engines prefer their own rendering to offer same look-n-feel across platforms.
Gecko, for Firefox
Trident, for Internet Explorer
Presto, for Opera
KHTML, for Konqueror
WebKit, for Apple's Safari and Google's Chrome web browsers.
Ref: http://en.wikipedia.org/wiki/Web_browser_engine
Do browser rendering engines useOs api for creating buttons, writing text, creating boxes, etc., or do they render all of this on their own using OS API just for actually show the rendered image on the screen?
I implemented something of a browser rendering engine (see e.g. Table of Supported Elements and Supported Properties for a list of the HTML elements and CSS properties that it supports).
I use system APIs (.NET Framework APIs, which are thin wrappers around underlying O/S GDI APIs) to:
Measure words (strings of text)
Paint words
Draw lines and boxes
Fill rectangles with solid color
These are the kind of API functionality that's implemented by the Windows GDI.
There are also some system (O/S or .NET) APIs that I use, to draw buttons and combo boxes (see Rewrite standard controls like edit, combo, etc?).
Becouse, the whole rendering of text, graphics and so seems pretty hard to write completely yourself
Yes, implementing CSS and everything does take a while. You've seen how long it took the browser developer teams to implement: several calendar years, many person-years.
Related
I am working on windows 10 mobile app. If I design an UI for 5' device, it doesn't look good on 5.2' device. Also on emulators of different screen size show messed up UI. Is there any work around this? Or do I have to design it for every screen size?
Usually, please avoid to have fixed Width/Height for your controls. With a Grid layout, you can set columns/rows and place your controls inside each cells. This is a first level to adapt properly your interface. In addition, UWP provides AdaptiveTriggers if you want to adapt the layout based on the screen resolution (cf. https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07) for additional information. Last but not least, please check Design&UI documention on https://developer.microsoft.com/en-us/windows/design.
The trick is with UWP that you can design for every screensize at once. It's just a responsive design you use (either HTML/CSS or XAML). But you have to use the right controls and settings.
Some guidance on how to design for various sizes can be found at the MSDN design page.
To create a dynamic layout with XAML, see this article. There are various panel-types you can use to do the layout (see this article). But if you really want to build a responsive UI (or change it dramatically in various sizes) RelativePanel is your friend.
Is there any way to show my website exactly the same way how it works on PC, tablets or notebook? I've got full HD laptop and i'm using Chrome - everything works great. On my tablet 10" I also have full HD resolution and Chrome and my website shows like this one on notebook. When I try to to show it on my full HD Lumia 1520 it's crap. I don't use Chrome here so I can understand that some element can be broken by interpreter but it's so approximate that every element go on the others. It looks like 640x480.
Is it some way to force approximate?
If the site developed is not responsive according to the screen size it will not display the content present on it in well manner, you must use bootstrap in your website to make it responsive for all kind of screen resolutions. It may has problem in the CSS. So check the css you used.
Try to use meta tag called view-port. There are different situations and you may set up your website appearance with media queries for responsive results or manage it for being non-responsive but comfortable.
If you need second result - don't use any responsive frameworks or prevent them of using responsive techniques.
There are to much different situations so I can help only if you'll show me the code you have.
I am looking for some insight on if / how I can better approach creating my KML in order to make my data more readable when loaded by via a custom app developed around the Google Earth Plugin.
My constraints are:
I have no ability to do anything with the custom app or the plugin,
I can only provide KML files and take advantage of any features
built into the Google Earth Plugin.
The side bar where you select data to display does not list the folders of the selected KML as a sub menu like I have seen in Google Earth.
My data looks like:
Hundreds of Data points sometimes quite close together, which I am
currently displaying as placemarks, with no names set (was too noisy
on the map). I supply additional details on the placemark in the
description bubble / balloon.
Placemarks are frequently related to one another (i.e. there may be
4 placemarks representing a distinct group (e.g. coffee shops)).
What I have found so far:
There is no way for me to group pins as I zoom in and out without access to the JavaScript API / ability to do some amount of front end programming (i.e. there is no way to specify in the KML that pins should be grouped based on zoom level. I have noted the zoom level visibility settings which I do not believe accomplish what I am looking to do).
When clicking on a placemark there is no way to identify the other placemarks which are in the same group (i.e. all coffee shops) such as by changing their style (again note that to work for me this would have to be native functionality whose behaviour can be pre-specified in the KML). I hoped the plugin might provide some default functionality around this with folders, but I haven't been able to find anything.
My questions:
Are my above assumptions correct?
Are there some aspects of the KML spec and how it is displayed by google-earth which might be a good place for me to spend additional time understanding given the nature of my data?
Any suggestions or insight would be very welcome.
Edit: Also considered creating KML Tours to adjust visibility / identify related Placemarks, but could not see how I might start / stop the tour from a given Placemark (e.g. by clicking a link in the description balloon?).
Firstly, a question for you.
Are you wishing to load your 'app' on a mobile device? or are you just trying to do something on a normal computer?
I ask because you mention 'app' - yet in this line
I have no ability to do anything with the custom app or the plugin, I
can only provide KML files and take advantage of any features built
into the Google Earth Plugin.
The Google Earth PLUGIN is not support by mobile devices (yet) so if you can take advantage of it you must be talking about a normal computer scenario. So either a webpage, or a webpage embedded inside another program.
As for
There is no way for me to group pins as I zoom in and out without
access to the JavaScript API / ability to do some amount of front end
programming (i.e. there is no way to specify in the KML that pins
should be grouped based on zoom level. I have noted the zoom level
visibility settings which I do not believe accomplish what I am
looking to do).
Have you looked into using Regions ? With them you can control at what 'zoom' (ie what POV) a placemark becomes visible.
As for
When clicking on a placemark there is no way to identify the other
placemarks which are in the same group (i.e. all coffee shops) such as
by changing their style (again note that to work for me this would
have to be native functionality whose behaviour can be pre-specified
in the KML). I hoped the plugin might provide some default
functionality around this with folders, but I haven't been able to
find anything.
This depends of if you are really using the plug-in (and thus JS) or not. With straight KML I don't think anything is possible. However if you are using the plugin (and some JS) you have number of options depending on how you set up your .kml.
You can 'walk' through your kml file and find all placemarks with the same <style>
You can assign all your placemark id's by - and then using Accessors like this var placemark = ge.getElementById('unique_id');
However it sounds like you are not using JS so I am probably wasting time with this.
Same goes for using tours, IF you are using the plugin and IF you are willing to do some JS coding then YES you can use tours to all kinds of things.
However, if you are talking about a mobile device app, then nothing is possible (except the Regions) and I suggest you edit your question to remove the 'google-earth-plugin' tag.
I'm working on a web project that has some accessibility features mandated by the client, including a "font size changer" to allow the font size to be increased for visually impaired users.
Despite my arguments that a better experience will be had by using the built-in zoom features in the browser, the client has insisted that their users will not know to use these built-in features, so we must provide a text size changing widget.
What I'd like to do, if possible, is cause these page elements to invoke the browser's own zoom functionality (Ctrl + + in firefox, for example). If the browser doesn't support this method of zooming, then I might fall back to increasing the font size with css.
How can I best implement this kind of feature? Is it even possible? Is there some solution that I've overlooked?
There is no way as far as I know to use the browser's built in function. However it can be done with CSS3 or javascript. for a CSS3 example look here: http://www.css3.com/css-zoom/
Is there a good way to create crisp, clear, LARGE font in webpages? I need to create a tag cloud effect on my homepage with different font sizes and colours.
I've got it set up in HTML/CSS but on the older browsers or OS's which don't support anti-aliasing as default it looks a bit... crappy.
I've played with sIFR, which worked beautifully but gave me some horrible load effects but I'm now wondering if there is a way to:
a) do browser/OS detection to split users by browser/OS combinations which I KNOW support anti-aliasing (they get raw HTML) and by "others" who get an image tag.
b) Some sort of JavaScript to add antialiasing?
c) Permanent solution to load a BG image in the div and hide the HTML text. (I know, I know, Google horror stories about de-indexing... but is it possible?)
a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)
Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.
However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?
b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.
c) Just use CSS, maybe?
h1.welcome {
background: url('the-welcome-image.png') no-repeat;
color: transparent;
}
+1 Hank's comment. You have very little to gain by doing this. Some desktop browsers (including IE7+ and Safari) turn on anti-aliasing by default even when it's off at an OS level, and modern (post-XP) OSs tend to turn it on by default anyway. By forcing AA on the rest, you'll:
(+) improve the display a little for IE6 and XP+Firefox users who unwittingly don't have AA
(-) make loading slower for everyone (but especially users of limited mobile devices)
(-) defeat preferred font sizes
(-) unnecessarily annoy the luddites who deliberately disable anti-aliasing because it's “all blurry”(*)
(*: there are limited cases where this does even make sense, particularly for old, fuzzy CRT monitors.)
By the looks of it the best methods (in no real order) are:
1) Use an image. If you rely on SEO for the site then by all means add html and hide it using css using one of these methods
2) typeface.js - JS which will work across most modern browsers. Has some bugs and glitches but works nicely. If you're going to force anti-aliasing on your users then this works. Use sparingly. Author working on Opera and IE8 compatability though...
2) sIFR - Excellent script which dynamically replaces your selected areas of text with flash movies. Again some bugs and glitches, but if you're simply interested in awesome looking font then this is perfect. Increases your page load though, so as ever more is less, use sparingly.
I tend not to go with JS heavy solutions, as I like to have lightning quick page loads, but if you HAVE to have some good looking fonts, then these seem to be the most graceful and simple methods.
-webkit-font-smoothing:antialiased;
Force background color, redefining it for the class or element with the same background color. It works.
span.your_class {
writing-mode: tb-rl;
filter: flipv fliph;
background-color: #006cb8 !important;
}
Flash or Silverlight are your best bets for great looking font rendering