This character doesn't exist in Unicode since I created it myself. Now, it is in an esp file format. After some searches, and my understanding, I can't just put it into Unicode.
My goal is to display it, let my viewers to see if they like it, but not in any picture format since it also serves other purposes for the website, where displaying it as an image is just not considered.
How can we display a self-created character where it could ONLY be displayed as a regular letter?
Yes we can, but we should be really careful doing so.
As Remy Lebau suggested, if you really insist on using custom glyph as "regular letter" inside text flow, you should
create a real font file to be placed on web (WOFF/OTF), or installed on each user device (OTF/TTF),
ensure that custom glyph in your font file is assigned to some code point from the "private-use" area,
use the code point in unicode-range value of #font-face,
and add newly created font-family to the font stack.
Example:
#font-face {
font-family: f;
src: local(Impact), local(Haettenschweiler), local(Helvetica Inserat);
unicode-range: U+65;
}
#font-face {
font-family: f;
src: local(Courier new), local(Menlo), local(Liberation Mono);
unicode-range: U+6f;
}
body { font-family: f, sans-serif; }
<p>Some text where letters "o" and "e" are from a different ("custom") font-faces.</p>
Font-face with only private-use characters should work even as a last (fallback) in the stack, but it does not matter here. In your case those "local()" declarations would be replaced with url() path or dataURI. If your target audience is in controlled environment (intranet) and you can reliably distribute the to all consuming devices, you can use even the local([name of locally installed ustom font])
The unicode-range value would be something like U+F8FF.
But, use this in and only if you are sure your users will
Why you probably should not do that this way
If there is chance (some of) your users have not installed, does not support, can not download or are blocking given font, or is using assistive technology to consume your content and given glyph conveys some meaningful information, you probably should refrain from using the approach described above.
If you don't have such controlled audience and want to support screen readers, and still don't want to use simple <img alt="[glyph meaning in the context]">, you should at least wrap their occurrences as suggested in Léonie Watson's article Accessible emoji:
Some text <span role="img" aria-label="[glyph meaning in the context]"></span>
Related
I'm attempting to move from font icons (icomoon.io) to SVG sprites. Is it possible to use SVG sprites without needing < svg > markup for each icon instance?
What I really liked about the font icons was that I didn't have to clutter my HTML with any additional elements to get the icon to display. I usually just targeted a simple class on whatever element I wanted the icon to display and then used pseudo selectors to display the icon, e.g.:
<h1 class="news">News</h1>
h1.user:before {
font-family: 'icons';
content: '\news';
}
That made a lot of sense to me, and all of my icons were easily managed almost completely in CSS. I rarely had to touch my HTML as long as my markup contained appropriate classes.
I've since switched my build system to Grunt and thought I'd give SVG sprites a try. Almost every1 article2 I3 can4 find5 on the subject says you need to add an additional SVG element to your markup wherever you want each instance to display, e.g.:
<h1>
<svg class="icon">
<use xlink:href="#icon-news">
</svg>
News
</h1>
That seems like a step backwards to me, at least in the management of markup. To me, an icon is usually presentation that should be separate from document structure. Are we doing it this way simply because of the state of SVG support in browsers?
Ideally, I'd love to be able to do something like this:
<h1 class="news">News</h1>
h1.news:before {
display: inline-block;
width: px;
height: px;
background: url(icons.svg#news) no-repeat;
}
This post seems to be closer to what I'm looking for, but I'm not sure of browser support and how to do it automatically in a build system like Grunt.
SVGs can be loaded as files exactly the same way as other images using <img> tags or CSS background, and can be used as sprites exactly the same way too. The only difference is that you have to specify the size you want it (because it's scalable, so the browser doesn't automatically know how big it is like it does with PNGs).
Depending on how you want to use the image, loading them this way may or may not be suitable as some SVG features aren't available, but it can be done.
I don't even know if this is possible, I have to bring an RTL version of the website that is LTR.. I'm using Foundation 5 with Node and Grunt.Basically a file that overwrites some css rules of the original ltr file..
The client asked me to; Use a special font-family when the size of the element's text is above 16px.. Since other devs change the sass/css constantly I need a tool (or SASS formula) that allows to automatically switch the font-family when deploying the files with Grunt.
So instead of spending lots of time "scanning" the whole css/sass files for font-sizes and re-creating those rules with correct font-family.. I need something that automatically detects if the font-size is set then checks if it is above 16px, then if so, it changes the font family of the element.
Thanks
For me best way to do that is to use one SASS mixin to apply the font-size and check the value to apply the custom font :
#mixin custom-font-size($pixel) {
font-size: $pixel;
#if $pixel > 16 {
font-family: 'Comic Sans MS';
}
}
and call it like so :
#include custom-font-size(10px);
I am trying to create an interactive map where users can click on different provinces in the map to get info specific to that province.
Example:
archived: http://www.todospelaeducacao.org.br/
archived: http://code.google.com/p/svg2imap/
So far I've only found solutions that have limited functionality. I've only really searched for this using an SVG file, but I would be open to other file types if it is possible.
If anyone knows of a fully functioning way to do this (jQuery plug-in, PHP script, vector images) or a tutorial on how to do it manually please do share.
jQuery plugin for decorating image maps (highlights, select areas, tooltips):
http://www.outsharked.com/imagemapster/
Disclosure: I wrote it.
Sounds like you want a simple imagemap, I'd recommend to not make it more complex than it needs to be. Here's an article on how to improve imagemaps with svg. It's very easy to do clickable regions in svg itself, just add some <a> elements around the shapes you want to have clickable.
A couple of options if you need something more advanced:
http://jqvmap.com/
http://jvectormap.com/
http://polymaps.org/
I think it's better to divide my answer to 2 parts:
A-Create everything from scratch (using SVG, JavaScript, and HTML5):
Create a new HTML5 page
Create a new SVG file, each clickable area (province) should be a separate SVG Polygon in your SVG file,
(I'm using Adobe Illustrator for creating SVG files but you can find many alternative software products too, for example Inkscape)
Add mouseover and click events to your polygons one by one
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"
onmouseover="mouseOverHandler(evt)"
onclick="clickHandler(evt)" />
Add a handler for each event in your JavaScript code and add your desired code to the handler
function mouseOverHandler(evt) {};
function clickHandler(evt) {};
Add the SVG file to your HTML page (I prefer inline SVG but you can use linked SVG file too)
Upload the files to your server
B-Use a software like FLDraw Interactive Image Creator (only if you have a map image and want to make it interactive):
Create an empty project and choose your map image as your base image when creating the new project
Add a Polygon element (from the Shape menu) for each province
For each polygon double click it to open the Properties window where you can choose an event type for mouse-over and click,
also change the shape opacity to 0 to make it invisible
Save your project and Publish it to HTML5, FLDraw will create a new folder that contains all of the required files for your project that you can upload to your server.
Option (A) is very good if you are programmer or you have someone to create the required code and SVG file for you,
Option (B) is good if you don't want to hire someone or spend your own time for creating everything from scratch
You have some other options too, for example using HTML5 Canvas instead of SVG, but it's not very easy to create a Zoomable map using HTML5 Canvas,
maybe there are some other ways too that I'm not aware of.
Just in case anyone will search for it - I used it on several sites, always the customization and RD possibilities were a perfect fit for what I needed. Simple and it is free to use:
Clickable CSS Maps
One note for more scripts on a site: I had some annoying problems with getting to work a map (that worked as a graphic menu) in Drupal 7. There where many other script used, and after handling them, I got stuck with the map - it still didn't work, although the jquery.cssmap.js, CSS (both local) and the script in the where in the right place. Firebug showed me an error and I suddenly eureka - a simple oversight, I left the script code as it was in the example and there was a conflict. Just change the front function "$" to "jQuery" (or other handler) and it works perfect. :]
Here's what I ment (of course you can put it before instead of the ):
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
Go to SVG to Script
with your SVG the default output is the map in SVG
Code which adds events is also added but is easily identified and can be altered as required.
I have been using makeaclickablemap for my province maps for some time now and it turned out to be a really good fit.
I had the same requirements and finally this Map converter worked for me. It is the best plugin for any map generation.
Here is another image map plugin I wrote to enhance image maps: https://github.com/gestixi/pictarea
It makes it easy to highlight all the area and let you specify different styles depending on the state of the zone: normal, hover, active, disable.
You can also specify how many zones can be selected at the same time.
The following code may help you:
$("#svgEuropa [id='stallwanger.it.dev_shape_DEU']").on("click",function(){
alert($(this).attr("id"));
});
Source
You have quite a few options for this:
1 - If you can find an SVG file for the map you want, you can use something like RaphaelJS or SnapSVG to add click listeners for your states/regions, this solution is the most customizable...
2 - You can use dedicated tools such as clickablemapbuilder (free) or makeaclickablemap (i think free also).
[disclaimer] Im the author of clickablemapbuilder.com :)
<script type="text/javascript">
jQuery(function($){
$('#map-country').cssMap({'size' : 810});
});
</script>
strong text
I would like to choose fonts in a web page using logic along the lines of "if you have this system font A, use it, otherwise download and use font B".
I can do this in CSS like so:
#font-face {
font-family: B;
src: url('B.ttf');
}
p {
font-family: A, B;
}
My question is: If the system has font A installed (i.e. font B is never actually required to render the document), is B.ttf downloaded or not - and does it vary between browsers?
The file B.ttf may be requested, even if font A is available on the system and the browser doesn't need to fall back to font B.
Paraphrased from the CSS3 Fonts module spec, §4.7 Font loading guidelines, with a relevant code snippet:
In cases where a font might be downloaded in character fallback cases, user agents may download a font if it's listed in a font list but is not actually used for a given text run.
#font-face {
font-family: GeometricModern;
src: url(font.ttf);
}
h2 {
/* font may be downloaded for pages with h2 elements,
even if Futura is available locally */
font-family: Futura, GeometricModern, sans-serif;
}
Since it's not a requirement (i.e. "may", not "must"), it's the vendor's choice whether their browser downloads a web font for fallback use even if it's not required. As far as I know, Firefox will download B.ttf, and it appears that Safari and Google Chrome won't (I haven't even tested in Opera and IE yet).
So, it looks like this behavior varies between browsers — but there's no right or wrong in such a scenario.
I am trying to figure out how the search tool in a web browser is being able to parse through the entire web page(assuming huge content on a page) and highlight the result as we type. Does it pre-cache the page while loading in a map or use regex to get a quick result on the fly?
The document is already parsed, by the browser. Searching that document could walk the DOM tree, decide what nodes that could be searched, and inject document nodes to alter the display(such as making the text bold etc).
A standard string matching algorithms can parse through a really huge chunk of text in a second.(think about it, you can run a 3D multiplayer game with collition detection,scene culling, AI,, sound, flashy effects, integrated voice chat, at 60fps on a standard computer, searching a few megabytes of text is nothing..)
Finding a substring in a bigger text isn't such of a hard work for a computer to do. Actually, I believe it is much harder to render a html page (though not too hard) than to find a substring. As mentioned, there is fast algorithms for this.
Keep in mind, your machine is almost fully dedicated to this at this moment, so there's lots of processing capacity dedicated to this (rather simple) job...
I don't know the details, but I would imagine it is something like this.
The Boyer-Moore algorithm is a very fast and efficient way of searching for text substrings.
I expect it would involve traversing the dom for plain text. I may only be speculating but I would take the dom and search for elements that could contain plaintext, inside which I would do a search of that elements contents and child elements.
If you do a search in firefox and look via firefbug you'll notice that firefox modifies the dom of the document so that search items are children of elements themselves, to which styling such as the highlighting is applied.
For example, here is what happens to the phrase 'eleme' on this page if I start a search using firefox and highlight all:
<span style="padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit;" class="__mozilla-findbar-search">eleme</span>
php/ smarty
by using url encode you can do it ?pls serach on urlencode file?="c-content"
prefix
sample code ::::
print_r($file);
if(isset($file)){
$var=explode("-",$file);
print_r($var);
$prefix=$var[0];
$script=$var[1];
}
else
{
$file="c-home1";
$prefix="c";
$script="home";
$modid = 0;
}
if($script=="")
$script="prod_list";
------------------------------------------------------------------------------------------
//following code finds out the modules from sufiix and find out the script name
switch ($prefix)
{
case "c":
$module = "content";
break;
case "m":
$module = "myaccount";
break;
default:
$module = "content";
break;
}
$smarty->assign("module",$module);
//following code finds out the modules from suffix and find out the script name
$include_script .= $module."/".$script.".php";
if(file_exists($include_script))
include_once($include_script);
else
include_once("content/error.php");
if($script!='home')
{
if($script == 'termsandcondition'){
$smarty->display("content/termsandcondition.tpl");
}else{
$smarty->display("template.tpl");
}
}
else
{
$smarty->display("template_home.tpl");
$smarty->assign("msg",$msg);
$smarty->assign("msglogin",$msglogin);
}
?>