what is whitespace when inspecting? - javascript

I'm having a weird issue with webpack for along time, the issue is the layout in Dev is slightly different than the build, while inspecting in Firefox i found that the difference is the white space, my question is what is white space as showing in the image below, and how to keep that white space after building ?

Whitespace is a set of characters which is used to show horizontal or vertical spaces between other characters. They are often used to separate tokens in HTML, CSS, JavaScript.
To keep it , You can use this code &#8287 and add a space in the HTML content.

Related

Using CSS or Javascript, how do I fix orphan text in Chinese characters on a responsive web page?

I have a site that is localised in Chinese .
On some paragraphs (p tag) I have an orphaned character which my client is complaining about.
e.g
此处显示新此处显示新此处显示新此处显示新此处显示新此处显示
处
Since there are no spaces between characters, I can't just put a or line-break between the last two words.
The text is dynamic and CMS driven, so I can't explicitly insert anything in the text.
The web page is responsive, the width of this paragraph changes depending on the screen width
Any ideas how I can solve this problem?
If you are able to somehow process the text, then arrange to put the last two or three characters in a nowrap span:
<div >此处显示新此处显示新此处显示处显<span style="white-space: nowrap; ">示处</span></div>
If you are not able to modify the text in this way, then I would say you are out of luck. There is no CSS property to handle this type of widow-prevention. However, there may be alternative solutions involving zero-width spaces, <wbr> elements, and/or the word-break property which could be worth looking into.

cufon glyphs support

I have a problem with cufon and a few Turkish glyphs. This is the context:
I used the #font-face property to embed the custom font (Delicious-Roman) on a website. The client didn't like the fact that the font was the last one to load on each page (common issue with font-face) so I switched to cufon. When I was using font-face all the characters worked as they should, but when I used cufon a few glyphs stopped working (they simply don't show up on the page). I opened up Photoshop to test the font and indeed it doesn't have those Turkish characters (ğĞİşŞ).
Why the font-face property managed to show all the characters even if the font didn't have them?
How can I add those Turkish characters (ğĞİşŞ) to cufon?
I tried the "...and also these single characters" option on the cufon website but it didn't worked. I simply inserted the characters - ğĞİşŞ - in that text field. Is that correct?
If there is no way to add these glyphs to cufon, what is the easiest way to add them directly in the font I use?
The easiest way I found was to simply include the missing characters into the font and the re-use cufon. For this task I used the Glyph App - Demo version works perfectly for 30 days and you can export fonts without restriction.

What is the difference between using tab and space when we do source code formatting?

When we want to give some formatting to code to make it more readable. We can use both Tab and Space (by pressing space bar on keyboard). Many time I give space manually.
I've some confusions
Is there any difference between them?
Is using tab better than spaces?
Does using space increase the size of document and tab not?
Is there any differences between single tab/space and multiple. in terms of page size?
Is there any difference on using tab or space in HTML, CSS and Javascript?
Dreamweaver has this option in preferences
Tabs need less characters and are formatted by users (some display as 2, some as 4 spaces), what can make some code look bad on some other environment.
Spaces consume more KBs but look equal everywhere.
Good editors have retab-functions to convert those.
In JS and CSS it does not matter, HTML should not matter, but can in some cases.
Using tabs is annoying because some editors interpret a tab as 4 spaces, some others as 8 spaces, and some others as 2 spaces, which makes the indentation completely wrong if tabs and spaces are used in the same file.
I always use spaces only to avoid this problem.
It could slightly increase the download size of your pages, but you could also minify the JavaScript and the CSS files, and/or use gzip on-the-fly compression to mitigate this small problem.
Using Tabs :
Tab takes less space
Tab is user system defined :: So in my case if i prefer 2space::tab i can view it that way
Moving one indentation level back is lot easier if you use tabs .
Using Spaces :
Tab space ratio usually defaults to 1:8 . So on all 'newbie' systems your code will be difficult to read . Also if you view your code on github / pastebin there again it will be some what awkward .
My take : Go with tabs for development , find replace '\t' with ' ' [4 spaces] and then for release minify [ this strips tabs and spaces ] .
Personally, I see it as an issue of preference involving ease of formatting. I'd rather use tab, because it's only one click and it simulates 4-5 spaces. A lot simpler in my mind. Otherwise, I don't see much purpose.
In pretty much all cases, you can use tabs or spaces and it won't make a difference. Using tabs will make the source files slightly smaller, while using spaces will ensure that spacing is consistent for everyone (since tabs can have a variable width).
I believe the only language where it actually matters is Python. For any other language, tabs vs. spaces is basically even - just be sure to pick one and be consistent with it.
Using a tab technically takes up less memory than using, say, 5 spaces. So when trying to optimize file size it could be helpful. However minifying text would have a better effect. Look up minifying code for more on this topic.
Some people prefer spaces and some prefer tabs. Its a matter of preference and many folks have different reasons for it. Here is a great article on this point: http://www.jwz.org/doc/tabs-vs-spaces.html
Chances are for your application it wont matter much.
If your code is being downloaded, such as HTML or Javascript or CSS, it makes a difference because the file is larger if spaces are used. How much larger depends on the number of lines and indent levels. It's the same as including comments in the code: they do increase file size.
If your code will be compiled, such as Actionscript or Java or C, or tokenized such as Perl, it makes no difference whether you use spaces or tabs, and you can include as many paragraphs of comments/documentation as you like, because it's only for your own benefit. All those tabs and spaces and comments will be ignored when the final, lower-level code is built.

how can I modify browser word wrap behavior?

I notice that when the browser (firefox, safari) wraps text, the space where it breaks to wrap (the last space of a line) gets turned into a zero-width space, i.e, when you create a mouse selection across multiple lines in a paragraph, the space where it breaks does not visibly show. Is it possible to change this behavior so that the breaking space retains its width?
Thanks!
It's a guess but I would say no. This is a fundamental way in which the browser works.
Yes, this is possible using a font where the zero-width space character is designed having the width of a normal space. You may use Fontforge to create own fonts or to modify existing fonts. It is free and mighty, but takes some time to get used too.

Truncate text if it atempts to run into three lines

I have a small <p> about 140px wide aligned next to a picture. In total there is space for four lines of text. The first two lines are reserved for the title and there are two lines of other info.
I want the title to be cut if it spans more than two lines else it will push the other info out of line with the bottom of the image.
The only solution I could think of was to create a div the height of two lines with an overflow to hidden. However, if the title is only one line it leaves a big gap.
The solution can be Jquery, plain javascript, CSS or even PHP (if its possible).
TIA
Set the title to have a max-height of two lines
Keep in mind that the property max-height is not supported in IE6. In addition, limiting the size of text boxes can cause accessibility issues, and is generally not recommended.
As this is more of a content issue than a display issue, it's probably best to deal with it on the back end - if it's dynamic text, limit your database field to an appropriate character count, or chop it with some php (or whatever server side situation you're set up in). It's tough to establish a character count with a non-monospaced font, but if you don't limit it on the content side, you run the risk of upsetting your less visually-inclined users who may be using older browsers that don't zoom all fancy like the latest releases of safari and chrome.

Categories