I was using the default html font - Liberation Serif—30 glyphs in my page. Then i faced a problem, that multiple spaces to align two columns of text is not working properly.
I found out, spaces are not displayed at the same width as other characters and hence the same number of characters doesn't use same width. so, i started using monospaced font. It solves the alignment problem.
The alignment looks good now but the font is not the commonly used one as per the corporate standards.
How can i use a font like Liberation Serif and still do alignment using space characters?
If you want to align text in columns, how about using a <table>? Or if it's not tabular data, some CSS and float: left;.
To use a monospace font for primitive formatting in HTML, you can use the <pre> ... </pre> element. In fact, this tag will automatically select a monospace font for you:
<!-- the following shows the HTML, and the output will have the same column
formatting as it appears between the 'pre' tags -->
<pre>
9 328
2,345 208
xyz 4
</pre>
<pre> stands for "preserve." You can also apply it as a css style to other types of HTML tags. In this case, you would need to explicitly specify the monospace (such as "Consolas" on Windows) font to use:
<div style='font-family:Consolas; white-space:pre;'>
9 a
2,345 quick
xyz f o x
</div>
Make sure the text editor you use to create the HTML file is set to insert space characters. The layout might not look the same in the browser if it has any tab characters, or a mixture of tab and space.
Also, since the column and row formatting of the entire text inside a <pre> tag is preserved exactly, the examples shown above this would include an initial "line break" before the first row which (unlike the final line break) you might not want. It's because the text that's included actually starts immediately after the > character of the opening tag. There a few ways to address this, which are left as an exercise for the reader.
Related
Using Material Icons, a plus icon can be added as follows:
<i class="material-icons">add</i>
The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?
If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?
<span style="font-family: 'Glyphicons Halflings'">\20ac</span>
EXPLANATION
When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:
[MANDATORY] the list of characters
[MANDATORY] the hexadecimal codes of those characters
[OPTIONAL] one or more aliases/alternative names for those characters
The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.
Essentially, when using a character/icon from a font file with ligatures, we have the option to use
the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>
That is probably all the important info for a web designer to know.
EXTRAS
Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.
And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:
start the APP, select an icon and select 'generate font' (bottom right)
Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)
Material Icons. It is possible in a font to define special glyphs for combinations of characters. An example in English is the glyph æ, which is a combination of a and e. This is called a ligature. Other examples are special renderings of ff, ft and tt. Instead of drawing an f followed by another one, the two glyphs are drawn as a single connected glyph: f f versus ff. What the designers of the Material Icons set did is (ab)using this system to make it easy to use icons.
Let's take a step back for a moment. You'll notice in the usage of the add icon that it is possible to include it by directly using a character code that is mapped, in the font, to the correct icon.
<i class="material-icons"></i>
This refers to Unicode character U+E145, which falls in one of the Private Use Area blocks of the Unicode specification. This means that no character is usually assigned to this position and every font designer is free to put any glyph they want at that position. Google chose to put the add icon at that spot. Thus, this character, with font family Material Icons, will render as a nice icon.
In addition to that, they created a ligature in their font family that says that the combination of characters add should be rendered as the same glyph. When browsers support ligatures in their font rendering engine, this will result in the same output as using  would.
Google documents this very briefly as well.
In a nutshell: both (U+E145) and the string add will render as when using Material Icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
As character: <span class="material-icons"></span>.<br>
As ligature: <span class="material-icons">add</span>.
Boostrap and Glyphicons. The Glyphicons font does not define ligatures, but referencing the correct characters definitely does work. This is exactly what Bootstrap does, by setting (for the plus icon from Glyphicons) content: "\002b";. This sets the content of the span it is applied on to the character represented by the escaped code point U+002B, which is the plus sign. The Glyphicons Halflings font family renders this as some sort of icon, just like Material Icons. The only difference is that the icon is represented by a different character.
Why does using \002B in a span not work, you ask? That's because escaping a Unicode character in CSS is different than in HTML. In HTML, you'd use + instead (or € to get the example you have in your question). You can read more about escaping here.
Thus, + (U+002B) renders as and € (U+20AC) renders as when using the Glyphicons Halflings font family. You'll notice that for the Glyphicons, they chose to use characters resembling the icons, whereas Material Icons use special, reserved characters.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">+ €</span>
It seems to me that specifying the "importance" (read "size") of an element in the HTML violates the principle of separation of concerns that HTML5 espouses so much. If the designers of HTML5 deprecated tags like <big> and <strike> (see this link for a list of other such elements) because their behavior can and should be replicated in CSS, why wasn't the same done to the heading size tags (<h1>, <h2>, etc...)? Could these tags not have all been merged into one <h> tag, and then have CSS classes added to them to size them properly (eg <h1 class="big-header">)?
It seems highly arbitrary that the designers of HTML5 would include only six (see this link) <h> tags, all to be interpreted and displayed slightly differently. How was the number six determined? Why would they not develop one tag and leave it up to the developer to style it properly?
<h1>, <h2> ... <h6> are semantically important; they have a meaning besides the default styles. For the same reason <nav>, <aside>, <article>, <footer>, etc. were added in HTML5.
To quote the spec:
Because HTML conveys meaning, rather than presentation, the same page can also be used by a small browser on a mobile phone, without any change to the page. Instead of headings being in large letters as on the desktop, for example, the browser on the mobile phone might use the same size text for the whole the page, but with the headings in bold.
It seems as if maybe they wanted to allow responsiveness to be built into the standard, and that may be part of the reason.
Link to the quoted passage
If they left it to the developer to supply all CSS for headings, why use headings at all, aside from semantic meaning.
The difference is that the number in h are not related with size, are related with content deep, titles and sub titles so h1 represent the main title, h2 represents second level subtitles, h3 3rd level of subtitles and so on.
I would like to html code part of my tumblr page, but in the context, I can't add any css. Is there any way to format text size, font, color, etc. without using css? I looked at <font> tags but they don't seem to be supported in html5. Is there a workaround or tag that would do this for me?
Thanks for all your help
With HTML alone, without any CSS, you can set
font family with <font face=...>
font size with <font size=...> (though just to a few values)
text color with <font color=...>
italic typefact with <i>
bold typeface with <b>
superscripts with <sup>
subscripts with <sub>
underlining with <u>
forced line breaks with <br>
allowed direct line break points with <wbr>
allowed hyphenation (word division) points with
no line breaks with <nobr>
text alignment in some elements with align attribute or (for vertical alignment) valign attribute
background color and/or image with bgcolor and background attributes in body element and in table-related elements
automatically scrolling text with <marquee>
and some other formatting tools (it is somewhat debatable what belongs to text formatting).
Although HTML5 drafts declare many of these as “obsolete” and “nonconforming”, they also require or strongly recommend (depending on element) that browsers continue supporting them, with the exception of nobr (which is well supported by browsers, with no signs of getting dropped).
(HTML5 is a draft specification. It does not “support” anything; browsers do. Specifications may require support, but that’s just a normative statement, about how things should be.)
If you can in fact use CSS at least in style attributes, then there are many more possibilities, though styling is then clumsy and limited.
Add CSS as a style directly to the tag you want to format.
EX.
<p style="width:20px;height:20px;background-color:#ffcc00;">The contents go here</p>
CSS in a separate file may not be the answer but you may be able to include it in the head of the HTML file like so:
<doctype HTML>
<html>
<head> <title>My title</title>
<style>h1{
color:red;
font-size:20px;
}
</style>
</head>
<body><h1>My large text heading</h1>
<script>alert("Hi , I'm in javascript inside the HTML File");</script>
</body>
</html>
That is the easiest way and by doing so the code is in all one place, inside the head of the HTML file in a style tag, and can be edited easily. FYI Javascript functions can be added by placing them inside a '<script >alert("Hi , I'm in javascript");</script>' tag like above HTML code shows.
You can also add This would remove the underline and any formatting on the link. You can then also add your own styling e.g
Great Question,
There are a couple ways that you could go about doing this. One way to go about doing this is by using inline css. Inline css looks like this: <p style="color:red">
The Second way about going this is by seeing if your template has advanced settings under the settings. There you can edit the css file and then reference it in the html!
The second way will save you tons of time and help your blog look nice!
Your Welcome,
Oak
You may use the span style, div styles for styling the web page with out using cascading sheets.
Ex: <span style="color:#abc123;"> NAME </span>
I'm trying to break a specific word using css.
The word is "sales/telemarketing", and I'm trying to break the word after the "/tele" part. I'm trying to avoid using <br> as it might affect the way the layout for the paragraph tag.
Is there a way to break it using CSS?
I know you said you want to avoid <br>, but there is <wbr>..
jsfiddle demo
Example usage:
<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>
If you re-size the p, the word will break after tele.
See MDN
Sadly, there is limited support for <wbr>, as it isn't supported by IE10.
I just thought of a random CSS alternative..
jsFiddle demo
HTML
<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>
CSS
span {
margin-right:-4px;
}
Basically, you just include a space after tele, therefore it breaks to a new line.. By selecting the word tele, you can remove the space.. not ideal - but it works nonetheless.
You cannot specify a word division point in CSS (except in a contrived way, which would be just an unreliable emulation of the proper way). Instead, include a hyphenation hint, the soft hyphen, U+00AD, either by entering it directly if you know how to, or using the reference :
sales/telemarketing
You can add other hyphenation hints to the same word if you like. And you can add <wbr> after / to specify an allowed direct break point (no hyphen appears if the string is divided).
I have strange problems developing a site.
Any browser on my computer adds a spacing above some elements at the page (e.g. above the navbar, the dropdown in navbar, the container etc). In the Chrome Developer Tool it displays like having a strange text element (quotes with spacing):
but in source code it displays without it:
If I delete that quotes from the Tool, the spacing disappears.
That quotes (spacing) can't be added by Javascript or PHP: it exists ever it we comment all script includes and disable php preprocessing for .html files (example).
This spacing can't be added by CSS: e.g. for navbar we have rule:
.navbar {
margin-top: 0;
}
The spacing exists in all browsers at my computer (tested in Firefox, Chrome, IE 9).
Moreover, Firefox Dev Tool doesn't display any quotes:
but adds spacing in code in that places where are quotes in Chrome Dev Tool.
So, what's it? How to remove this spacing (I don't want to use ugly solutions like negative margin)?
Please comment do you have this problem on your machine? Thanks.
It seems to me, that the spaces are 'special spaces' like is one. They may look like a normal space character, even in a text editor
Look at the code, which generates the HTML structure.
Then delete the spaces in request. Put back the formating spaces by using the space bar key.
edit
looking closer in my text editor i realised, you have a special diacritical character in your code.
When you look a my screen from Notepad++ editor, there are small 'hooks' at the less than character (<) of the <nav> and the <li> tag which I marked red.
Don't just delete the spaces, delete the less than character (<) too and retype it using the keyboard.
The characters between the <body> and <nav> elements are a line feed and a BOM - Byte Order Mark (aka zero width non-breaking space) U+FEFF (EF BB BF in UTF-8). See the image below taken from Hex editor Neo
It's the BOM that you need to remove.
There is whitespace in your source HTML: between the <body> and <nav>. The only way to make it go away is by running the two tags together, as in
<body><nav class="..."> ... </nav></body>
HTML dictates that runs of whitespace outside of attribute values are treated as one single space, so it doesn't really matter how much whitespace there is, if it's newlines or not, etc. Even if you have a single space character in your HTML, a conformant browser has to treat it as a text node. It's these text nodes that Chrome hints to by showing the quotes.