Does HTML support any kind of hinting for (title) line-breaks? The problem is that often page titles or navigational titles have funny line breaking, as they happen to break wherever the current HTML element spacing allows. Manual line-breaks would give much nicer visuals, when line-breaks are needed.
The line-break hints should be something the editor can himself/herself enter to an <input type=text> field.
There's the (soft hyphen) entity and the <wbr> tag (HTML5) for word break marks. Notice that will create a hyphen if the line breaks, while <wbr> won't.
See also http://www.quirksmode.org/oddsandends/wbr.html.
So an editor could use for word breaking if he prefers a dash (-), or if he prefers only a word break.
Related
It seems to me, that HTML entity for nonbreaking space is not working properly in my code. I use: zvyšováním ceny – ta by negativně but instead of the dash and two words connected together, I see an ugly white space at the beginning of the new line. Do you have any idea how to solve this problem?
I know about about a non-breaking hyphen, but please remember there is the difference between a hyphen and a dash.
This works how it should, a line will break when there is a dash or a hyphen, but not when using a none-breaking hyphen, so by adding a will only prevent a line break at that space, hence called no breaking space ..
.. so as a result it will break at the dash and the following is causing the ugly white space at next line beginning
By removing the 2:nd , like this, it will work fine and no ugly space at next lines beginning
Some text having hyp - pen that should break after the hyphen
and another with the da – sh that should break after the dash
Fiddle demo
And if you don't want it to break, the dupe link has the answers needed, either using the non-breaking hyphen or wrap it and set the wrapper to white-space: nowrap
Dupe link: No line-break after a hyphen
The non-breaking space doesn't prevent the hyphen from being a point at which the word can break, so it effectively forces a space before and after the hyphen.
Use a non-breaking hyphen instead:
zvyšováním ceny‑ta by negativně
I think what you want is U+2060 WORD JOINER. This is intended to suppress line breaks that may otherwise occur, without introducing any spacing.
My HTML is using custom font to display special symbols. There are a lot of symbols, but only one of them is not displayed. It has the code 00AD
<table id="table_symbols">
<tr>
<td class="symbol"></td>
<td>Pair of bishops</td>
</tr>
</table>
I've searched and found that this is a special code for the soft hyphen character in HTML, so looks like the character is not taken from the font, but replaced with soft hyphen.
Is there any way to forbid such replacement? Or it is easier to edit the font?
Read this:
http://unicode-table.com/en/00AD/
https://www.cs.tut.fi/~jkorpela/shy.html
The Unicode character 00AD is defined to be invisible, except at the
end of a line, where it may or may not be visible, depending on the
script.
Anyway what you used was not the html correct code, instead or are used in html.
Use this example to understand the behavior of the element; (Note resize slowly and watch as the text has hyphen on the end but on normal view there is not).
This is the trick I used when making design for Hiring ads and the client wants pure grammar and also justified effect with no inner spaces(languages like German have big words and if no hyphens words will spread apart when justified).
I have noticed, while looking at my page source, the characters showing just after a <div> tag. I went trough my coding and can't find where it is from; I did some research and they are saying that it is there so words can be cut.
Near the <h1> tag I have a floating image that is a little bit bigger than the title. I was wondering if that was causing it since I could extend the title on a second line because of the floating image but it remains.
How do I get rid of it? Why is it there?
Here is what the source looks like:
<div class="container">
<img src="floating_right.png">
<h1>Title</h1>
<div class="more stuff"> eventually justified text</div>
</div>
Any clues?
EDIT
This is my actual code;
echo '<div id="inputTag">';
echo '<img id="winClose" class="btn_close" src="http://images/html/bouttons/fermer.png" alt="Fermer">';
echo '<h1>'.$titre.'</h1><br>';
I might also mention that I am using Webmatrix 3.
EDIT
To fix this I have opened the file in Notepad++ and there it was;
echo '<div id="inputTag">-';
Voila!
This script will find and remove all the invisible s on your page:
document.body.innerHTML=document.body.innerHTML.replace(/\u00AD/g, '');
It works by searching for the Unicode character U+00AD. It's invisible when it doesn't sit at a line break, which is probably why you can't find it in your code.
Soft hyphen (shy) This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use to insert a soft hyphen.
If you're finding in your code, I'd recommend leaving it there, especially if it's coupled with a <wbr> tag. See example below:
**Go full page, then open your console and change the viewport width. You'll notice how the word automatically breaks where is and adds the hyphen.
<h2>AAAAAAAABBBBBBBCCCCCCCDDDDDDEEE<wbr>EEEFFFFFFGGGGGGHHHHHHIIIIIIIJJJJJJJ</h2>
You can safely get rid of the tag in the example you have posted. is known as the soft hyphen and is used to break words up across multiple lines in web pages. You would normally expect to see it in the middle of really long words in a paragraph the same as you would hyphenate a long word in a written paragraph to space it over two lines in case you run out of page as you write it.
As for how to remove it, you can open the web page up using your website editor, locate the tag and simply delete it from the file as you would any other text on a web page when you edit the page normally.
A quick Google search showed this:
https://en.wikipedia.org/wiki/Soft_hyphen
Basically, it's a - I think. I would recommend looking for a - on your web page. If you don't see one I wouldn't recommend bothering with it unless you wanna use jQuery and make a simple script that'll remove it.
EDIT
It seems you want to get rid of it. I'd recommend trying to move around your images and play with them a little until it goes away.
I don't speak Arabic, but I need specific support for Arabic on our web. I need parts of Arabic words to be in a <span> with a different style than the rest of word. When I type two characters ش and س, they are composed into word شس, but when I use HTML markup
<span>ش</span>س
these letters are not concatenated right in the output.
In the picture, desired output is on second line, actual output is on first line.
EDIT: It works on Firefox, but does not work in Chrome/Safari.
Insert a zero-width joiner (e.g. using the entity reference ) at the end of the span element content: <span>ش</span>س.
More generally, the zero-width joiners at the start and end of each span element as well as (just to be more sure) before and after each span element, in situations where the text should have cursive (joining) behavior and span may break it.
The issue is discussed and illustrated on the Bidirectional text page by Andreas Prilop.
Update: Unfortunately, it seems that even does not help on current versions of WebKit browsers. They seem to treat HTML markup as breaking joining behavior, no matter what.
Update 2: As described in #NasserAl-Wohaibi’s comment, the new problem can be solved by using twice. However, in current Safari (5.1.7) for Windows, it does not help; in fact, it displays even شس wrong whereas without the joiner, it shows شس correctly.
This is actually a reported bug in WebKit, thus presumably affects all WebKit-based browsers.
As Jukka K. Korpela indicated, This is mostly a bug in most WebKit-based browsers(chrome, safari, etc).
A simple hack other than the TAMDEED char or getting contextual forms for Arabic letters would be to put the zero-width-joiner ( or ) before/after the letter you want to be treated as single Arabic ligature - two chars making up another one. e.g.
<p>عرب<span style="color: Red;">ي</span></p>
demo: jsfiddle
see also the webkit bug report.
In HTML, there is no character for a tab, but I am confused as to why I can copy and paste one here: " " (You can't see the full width of it, but if you click to edit my question, you will see the character.) If I can copy and paste a tab character, there should be a unicode equivalent that can be coded into html. I know it doesn't exist, but this is a mystery I've never been able to grasp.
So my question is: why is there not a unicode character for a tab even if I can copy and paste it?
Sure there's an entity for tabs:
(The tab is ASCII character 9, or Unicode U+0009.)
However, just like literal tabs (ones you type in to your text editor), all tab characters are treated as whitespace by HTML parsers and collapsed into a single space except those within a <pre> block, where literal tabs will be rendered as 8 spaces in a monospace font.
Try
as per the docs :
The character entities and denote an en space and an em
space respectively, where an en space is half the point size and an em
space is equal to the point size of the current font. For fixed pitch
fonts, the user agent can treat the en space as being equivalent to A
space character, and the em space as being equuivalent to two space
characters.
Docs link : https://www.w3.org/MarkUp/html3/specialchars.html
put it in between <pre></pre> tags then use this characters
it would not work without the <pre></pre> tags
Posting another alternative to be more complete. When I tried the "pre" based answers, they added extra vertical line breaks as well.
Each tab can be converted to a sequence non-breaking spaces which require no wrapping.
" "
This is not recommended for repeated/extensive use within a page. A div margin/padding approach would appear much cleaner.
I use <span style="display: inline-block; width: 2ch;"> </span> for a two characters wide tab.
Tab is [HT], or character number 9, in the unicode library.
As mentioned, for efficiency reasons sequential spaces are consolidated into one space the browser actually displays. Remember what the ML in HTML stand for. It's a Mark-up Language, designed to control how text is displayed.. not whitespace :p
Still, you can pretend the browser respects tabs since all the TAB does is prepend 4 spaces, and that's easy with CSS. either in line like ...
<div style="padding-left:4.00em;">Indenented text </div>
Or as a regular class in a style sheet
.tabbed {padding-left:4.00em;}
Then the HTML might look like
<p>regular paragraph regular paragraph regular paragraph</p>
<p class="tabbed">Indented text Indented text Indented text</p>
<p>regular paragraph regular paragraph regular paragraph</p>