My Sphinx project generates HTML for a document that uses code font inline. The text font I'm using is Lato; the code font is Consolas.
The problem is that wherever the document shifts from the text font to inline code, Sphinx inserts extra space. Here's a snapshot of how the text should look (simulated in another application) and how it actually looks:
The problem is particularly obvious with code at the beginning of a line. The extra space makes that line appear to be indented:
It looks like Sphinx is generating HTML that composes the preceding and following words in code font, but it's not:
Another composing tool I use does not do this, although it generates similar HTML:
I assume that the project's style sheet is giving the Consolas font some property that adds space before and after a font shift, but I can't find it in the style sheet or the browser's HTML inspector. Actually, I can't find a property in HTML that could do that. What should I look for?
Later -- this is a response to Steve Piercy's comment. I'm editing the original message because I can't insert graphics in a comment.
Steve asked me to attach a reproducible sample. I'm afraid that will be difficult because some parts of the project (the theme, i.e. the infrastructure, not just the content) are proprietary. I should be able to separate the style sheets from the theme and use them to demonstrate the problem in a "clean" theme, but to do that I'll need to learn more about themes. It's likely to take a while just to find time for that.
As an alternate approach, I'm attaching snapshots of the output, the HTML, and the entire set of applicable styles from the browser's HTML inspector. All of the relevant information should be there.
The display:
The HTML that generated it:
The styles (1 of 5)
(2 of 5)
(3 of 5)
(4 of 5)
(5 of 5)
Response to Steve Piercy, 11/29:
I followed Steve's 11/29 suggestion and saw the following.
For a piece of inline code:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, Courier, monospace;
font-size: 13.9333px;
font-weight: 500;
line-height: 17.6px;
text-align: left;
white-space: nowrap;
For the enclosing body type:
border-collapse: collapse;
border-spacing: 0px 0px;
box-sizing: border-box;
color: rgb(0, 0, 0);
empty-cells: show;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14.6667px;
font-weight: 400;
line-height: 17.6px;
margin-bottom: 5.86667px;
margin-left: 0px;
margin-right: 5px;
margin-top: 10.2667px;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
white-space: normal;
The only possibly relevant properties I see are box-sizing in the inline code, and margin-right in the body type. I tried changing both (to content-box and 0 respectively), but that had no effect.
December 5: Steve Piercy wrote, "You're getting closer. I see 4 margin-* attributes that you can inspect and override."
With respect, I don't see anything of the sort. I selected a piece of inline code and scrolled up and down the attribute stack several times, and when I couldn't find the margin attributes I copied and pasted the whole thing into a text editor and searched for "margin". There were no instances.
Here is the entire contents of the code inspector's right hand column (still with a piece of inline code selected):
Just a note to let you know that I found the problem. The <span> tag that wraps inline code does not have padding, but another tag -- two levels further up -- did! I changed that tag from "padding: 2px 5px;" to "padding: 2px 0;" and the problem resolved.
Thanks to everyone for your efforts to help. You really did help; I only found the problem while trying to simplify a complete HTML sample that i could upload without proprietary content.
Related
I have a code in my email template. This is just basic, but I'm starting off and no amount of Googling is helpful. I understand what it does to a certain extent, but I could not find this syntax in HTML or CSS, so I'm curious what does it do exactly, and can we do away with it.
#emailHeader {
table-layout: fixed;
font-family: Arial;
font-size: 15px;
font-weight: normal;
line-height: 22px;
}
#emailHeader td {
padding-bottom: 10px;
This might help your understanding:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
Basically, the code you posted in CSS styling for the element with the ID emailHeader and styling for any td element within it.
Whether or not you can remove depends on if you need that styling or not.
Why doesn't word wrap property work properly in the example below?
http://jsfiddle.net/k5VET/739/
What can I do to ensure that part of the word 'consectetur' fits in the first line itself? I want maximum number of characters to fit in each line.
The css is :
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-wrap:break-word;
border:2px solid; }
If word-wrap: break-all don't work, try also add this:
white-space:normal;
work for me with the .btn class in Bootstrap 3
Use word-break: break-all;
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
LIVE DEMO
Okay so I know this is an old question but I seriously think there could be some useful clarification of when to use which property. Looking at the existing answers, I feel they offer solutions without explanation so here is my attempt to help with that. For context, by default, the container will not try to break a single long word up because it wants to preserve the word in it's original form.
With that said, 3 main ways to break up words there is overflow-wrap, word-break, and hypens. I won't dive too deep into hypens though.
So first off. I see word-wrap is being used in the question but reading the documentation, that is deprecated and some browsers have decided to simply alias it to overflow-wrap. It's probably preferred not to use that.
The distinction between the two properties is pretty clear in the documentation but for clarity, overflow-wrap really only has two possible values and will detect if a word has been overflowed. If it does, by default it moves the entire word to the next line. If break-word is set, it will only break up the word if the entire word couldn't be placed on that line.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
overflow-wrap: break-word;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
You can see the pneumonoul... long word breaks exactly where it needs to on the next line after it attempts to separate the long word.
Now in contrast, we have word-break. This has more granular properties and actually also has a break-word option. This is synonymous to the above snippet so when to use one or the other I think is pretty trivial.
However, word-break also offers a break-all value which will break the word whenever possible to fit word where it was originally intended. It doesn't try to figure out if it needs the word to be on a new line or not -- it simply shoves the line break where it overflows. The biggest distinction here from the above is that long word we use is now still on the top.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
And then finally for hyphens have their own special way of breaking up words. For more info take a look at the documentation. Also worth noting that different languages have different ways of breaking up words but fortunately the hyphens property hooks into the lang attribute and understands what to do.
Another option people have suggested is using the white-space property which attempts to break up text through spaces. In the example I used, this doesn't help our situation because the word itself is longer than the container. I think the important thing to note about this CSS property is that this doesn't attempt to break up words within themselves and rather tries to do it via spaces whenever appropriate.
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
white-space: normal;
border:2px solid; }
#sp { }
<div id="fos">
<span id="sp">The longest word ever: pneumonoultramicroscopicsilicovolcanoconiosis and then some.</span>
</div>
Hope this helps.
This is useful for wrapping text in one line:
#fos {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
It does not wrap properly, because browsers do not apply automatic hyphenation (which would be the way to cause proper wrapping) by default. You need to use CSS hyphenation or JavaScipt-based hyphenation. The setting word-wrap:break-word, as well as word-break: break-all, by definition breaks words (splits th em to piece s at arbit rary poin ts), instead of proper wrapping.
Because the css word-wrap doesn't work in all browsers, use JavaScript instead! It should give the same result.
The function below requires JQuery and it will run each time window re-size.
The function checks if the element has more width then its parent, and if it has, it breaks all instead of words only. We don't want the children to grow bigger than it's parents, right?
I only needed it for tables, so if you want it in some other element, just change "table" to "#yourId" or ".yourClass". Make sure there is a parent-div or change "div" to "body" or something?
If it will go to else, it changes to word-break and then check if it should change back, that's why there is so much code.. :'/
$(window).on('resize',function() {
$('table').each(function(){
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
else{
$(this).css('word-break', 'break-word');
if($(this).width() > $(this).parent('div').width()){
$(this).css('word-break', 'break-all');
}
}
});
}).trigger('resize');
I hope it works for you!
To break only long words I used word-break: break-word;.
It seems to be deprecated for some reason, but it is the only thing that worked for me.
What I need is to break only the words that where too long and needed to be broke.
I try to set the font size (13px) and line-height size (23px) for textarea control.
For example the first code: ( http://jsfiddle.net/D6T4f/ )
<TEXTAREA style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>
If I click inside the blank textarea the cursor will be located on correct position.
But in this code I include style background-color: ( http://jsfiddle.net/4e2dL/ )
<TEXTAREA style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>
I added only one style background-color: white;. So, if I try to click inside the textarea the cursor will be located not like in the first code (slightly higher). But If I start typing some text, the cursor will move to correct position.
How to avoid this if I need to use this style?
The problem appears in IE 9. Chrome (latest) is OK.
The same problem caused also if I use style background-image: none;
Thanks!
Can you try to remove space or new line between HERE
It might cause because of this.
with it only being an IE9 issue, it looks to be a that when you add the background style it is also overriding and removing some other standard IE9 styles.
The solution, you are going to need to be more explicit with your styles to help normalise the styles that are affecting the textareas, I have put an example together where the styles of the textarea have been completely overwritten by the css styles to bring the two inline: http://jsfiddle.net/PXgxU/2/
So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.
Because I want the titles and dates… i.e.
Hello World
May 6, 2011
…to be very close together, instead of your usual gap, I’ve created a separate CSS stylesheet (dialog.css).
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-weight: bold;
margin: 0;
}
h1 + p {
margin: 0;
}
h2 {
margin: 0;
}
h2 + p {
margin: 0;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.
Is there a way to prevent this from happening, like a special HTML or CSS code?
Thanks.
It sounds like dialog.css is being loaded in the main page's scope.
if your dialog is built like this:
<div id="dialog">
<!-- content -->
</div>
then you can make your css like this:
#dialog h1 {
font-weight: bold;
margin: 0;
}
and those properties will only apply to elements within an element of id #dialog
Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.
use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.
also you may try adding !important after each rule.
When presenting preformatted text on the web (e.g. code samples), line wrapping can be a problem. You want to wrap for readability without scrolling, but also need it to be unambiguous to the user that it is all one line with no line break.
For example, you may have a really long command line to display, like this:
c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"
(Stackoverflow forces a line like this not to wrap.)
Is there a way of styling with CSS to give the same treatment as you see in books? i.e. to wrap the line, but include an image or glyph that indicates a line continuation.
Obviously I am looking for a style that can be applied to all text, and let the browser's XHTML/CSS rendering engine figure out which lines have wrapped and therefore need the special treatment.
The Solution so far..
Adding line continuation glyphs
Thanks to Jack Ryan and Maarten Sander, have a reasonably workable solution to add continuation glyphs to either the left or right of wrapped lines. It requires an image with repeating glyphs in the vertical, which is offset so that it is invisible if only one unwrapped line. The main requirement of this technique is that every line needs to be within a block (e.g. p, span or div). This means it cannot easily be used manually with existing text that is just sitting in a pre block.
The fragment below summarises the essential technique. I posted a live example here.
.wrap-cont-l {
margin-left: 24px;
margin-bottom: 14px;
width: 400px;
}
.wrap-cont-l p {
font-family: Courier New, Monospace;
font-size: 12px;
line-height: 14px;
background: url(wrap-cont-l.png) no-repeat 0 14px; /* move the background down so it starts on line 2 */
text-indent: -21px;
padding-left: 14px;
margin: 0 0 2px 7px;
}
.wrap-cont-r {
margin-left: 24px;
margin-bottom: 14px;
width: 400px;
}
.wrap-cont-r p {
font-family: Courier New, Monospace;
font-size: 12px;
line-height: 14px;
background: url(wrap-cont-r.png) no-repeat right 14px; /* move the background down so it starts on line 2 */
text-indent: -28px;
margin: 0 0 2px 28px;
padding-right: 14px;
}
To be used like this:
<div class="wrap-cont-l">
<p>take a long line</p>
<p>take a long line</p>
</div>
<div class="wrap-cont-r">
<p>take a long line</p>
<p>reel him in</p>
</div>
But wait, there's more!
I recently discovered syntaxhighlighter by Alex Gorbatchev. It is a fantastic tool for dynamically and automatically formatting text blocks. It is principally intended for syntax highlighting code, but could be used for any text. In v1.5.1 however, it does not wrap lines (in fact it forces them not to wrap).
I did a little hacking around though, and was able to add a simple line wrap option syntaxhighlighter and also incorporate the continuation glyph idea.
I've added this to the live examples and included a few notes on the hacks required (they are trivial). So with this as the text in the page:
<textarea name="code" class="java:wraplines" cols="60" rows="10">
public class HelloWorld {
public static void main (String[] args)
{
System.out.println("Hello World! But that's not all I have to say. This line is going to go on for a very long time and I'd like to see it wrapped in the display. Note that the line styling clearly indicates a continuation.");
}
}
</textarea>
This is a snapshot of the formatted result:
screenshot http://tardate.com/syntaxhighlighter/line-continuation-example.jpg
Here is one (unpleasant) way of doing this. It requires a number of bad practices. But SO is about solutions to real problems so here we go...
First each line needs to be wrapped in some sort of containing block. Span or p are probably the most appropriate.
Then the style of the containing block needs to have line height set. and a background image that contains a number of newLine glyphs at the start of every line except the first one. As this is code it would be resonable to expect it to not wrap more than 5 times. So repeating 5 times is probably enoygh.
This can then be set as the background image, and should display at the beginning of every line except the first one. I guess the resulting CSS might look like this:
p.codeLine
{
font-size: 12px;
line-height: 12px;
font-family: Monospace;
background: transparent url(lineGlyph) no-repeat 0 12px; /* move the background down so it starts on line 2 */
padding-left: 6px; /* move the text over so we can see the newline glyph*/
}
I've found a solution very similar to Jack Ryan's, but with the 'continuation' character at the end of the line. It also indents the continued lines.
The CSS:
p {
font-family: Arial, Sans-Serif;
font-size: 13px;
line-height: 16px;
margin: 0 0 16px 0;
}
.wrap-cont {
font-family: Courier New, Monospace;
margin-bottom: 16px;
width: 400px;
}
.wrap-cont p {
background: url(wrap-cont.gif) no-repeat bottom right;
text-indent: -32px;
margin: 0 0 0 32px;
padding-right: 16px;
}
The HTML:
<p>For example, you may have a really long command line to display, like this:</p>
<div class="wrap-cont">
<p>c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
<p>c:\Program Files\My Application\Module\bin\..> Some_really_long_command line "with parameters" "that just go on and on" " that should all be typed on one line" "but need to be wrapped for display and I'd like the text style to indicate that it has wrapped"</p>
</div>
<p>Stackoverflow forces a line like this not to wrap.</p>
This cannot be done with CSS. Sorry. :(
If you want it to be unambiguous, you'll have to add markup. I'd suggest using an <ol> with one list item per line of code, because that way you get line numbering for free. If this is too much work to do across the site, you could always add it using Javascript.