After switching to nested ordered lists, each having one or more li with a div, I get horrible page-breaks that cut the text in half. I wouldn't mind if the content had a page-break, but having it break mid-text-characters in the page margin is not acceptable.
Example html (arbitrarily-deep ol + li + ol + ... nesting not known until runtime - single page content generated in react):
I've already placed css to avoid page-breaks over images and the class "avoid-break" in the question classes as well:
.TestEditorQuestion {
position: relative;
border: 3px;
background-color: #eee;
border-color: gray;
padding-left: 0.8rem;
padding-right: 0.8rem;
padding-top: .08rem;
padding-bottom: .08rem;
margin: 5px;
text-align: left;
border-radius: 10px;
width: 99%;
display: block;
height: 10%;
box-sizing: border-box;
}
... lots of css code that doesn't affect this
avoid-break {
break-inside: avoid;
page-break-inside: avoid; // for older browsers
}
#media print {
.no-print,
button {
display: none !important;
}
#page {
size: A4;
margin: 1.5cm;
#bottom-center {
content: counter(page) "/" counter(pages);
}
}
}
<ol>
...
<li>
<div class="TestEditorQuestion avoid-break">
<p>() Dois ou mais .... (long text) ...</p>
</div>
</li>
<li>
<div class="TestEditorImage avoid-break">
<img ...>...</img>
<p> ... long question text ...</>
</li>
....
</ol>
Example of the broken print layout with cuts in the text itself:
Other example with a div of class "avoid-break" with an image and a caption (paragraph):
Yet another example of a page-break cutting the text of a question that has the avoid-break CSS class:
I want to build an MVP first so if using the latest chrome/firefox version is needed I'm ok with it for now.
How do I stop the browser from cutting the text characters in half at page breaks?
I have a lot of code in this app and mostly not related at all to this issue, so I've tried to leave that out, but if you need extra info please request it and I'll provide it.
Thank you!
Apparently, after some 6 hours trying to debug this and making a simpler example to put here for reproduction I found out that the simple example always worked and that was because I didn't put a containing div that for the print had overflow:auto.
Just by changing that to overflow: visible, all breaks work!
Apparently that is because browsers don't support any other kind of overflow.
Thank you all for your time, hadn't you constantly requested a reproducible example we wouldn't have this fixed! :)
Related
Can anyone explain this odd behavior, why extra spacing is adding in between buttons.
Case -
Following is the HTML code which is adding extra space in between buttons if written like this -
<div class="wrapper">
<button class="btn one">First long button with a long text length</button>
<button class="btn two">Second long button with a long text length</button>
</div>
Output -
BUT if I am writing like this then no space is coming -
Code -
<div class="wrapper">
<button class="btn one">First long button with a long text length</button><button class="btn two">Second long button with a long text length</button>
</div>
Output -
CSS Code -
* {
margin: 0;
padding: 0;
}
.wrapper {
padding: 10px;
}
.btn {
font-size: 14px;
line-height: 28px;
background: #FFFFFF;
border: 1px solid #C3C3C3;
position: relative;
padding: 10px;
display: inline;
}
.btn:before {
content: "";
position: absolute;
width: 4%;
height: 5px;
background: #FFF;
right: 0px;
top: -5px;
}
.two {
display: inline;
}
With inline-elements, line-breaks (and multiple spaces) are converted to 1 space.
There are several things you can do in order to eliminate white-space between elements; however it depends on the kind of elements used and the browser's html rendering engine.
Here are some things that work for the "white-space" issues, but bare in mind that ultimately you want your code to look neat.
Good solution .: no white-space & clever CSS
Coding your HTML with no white-space will definitely sort this out for most major browsers, but it makes your code illegible; however you can run your code through an HTML pre-processor (like PHP) and minify your code before serving it to the browser. This may seem "daft" for speed concerns, but if you can get clever with "configuration" of your projects in your pre-processor to "bake" (minify) your source-code as a separate file while in "development" mode; and only "serve" the minified code when in "live" mode.
If you prefer the "pre-processor" option then have a look at: how to minify html code
In your CSS, take note of how different elements render in the browser.
With "block-type" & "view-port" elements, wrap them inside other elements you can control; because styling these to be displayed inline may cause issues, hence why the CSS value for these: display:inline-block, but it's not a 100% guarantee to look as intended.
HTML only .: comments & weird closing-angle placement .: ugly but works
<button>one</button><!--
--><button>two</button>
<button>one</button
><button>one</button>
CSS only .: font-size zero on parent, consistent position & margin
If you're using the font-size:0px then you have to be smart with your CSS selectors. Forcing standard margins/padding for all your elements is a good idea for consistency:
body{font-size:0px;}
p,b,i,a,span{font-size:16px;}
div,svg{position:relative; box-sizing:border-box; margin:0px;}
The \n is a legal character in html, it just don't return line.
You can resolve it by adding font-size:0 to the container of the buttons for example, as the buttons have font-size:14px.
div.wrapper { font-size:0 ; }
Just be carefull with the other elements in your wrapper wich will heritate from your font-size:0.
OR : you can write in on the same line... :)
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I have a header which I constructed like this:
<header class="top">
<a href="">
<span class="right">Stichting Delftsche Opera Compagnie presenteert</span>
<h1 class="right">Carmen</h1>
<h2 class="right">Een opera door Krashna Musika en de TU Delft</h2>
</a>
</header>
This should look like this, as someone made this in Adobe Illustrator
Then I applied some css and got to this (in the original there is a Dutch spelling mistake, this one is corrected, the scale is not completely equal either):
The rules:
.top {
display: block;
width: 800px;
float: right;
}
.top a {
background-image: url('../img/logo.jpg');
background-size: 150px 150px;
background-repeat: no-repeat;
padding-left: 150px;
height: 175px;
display: block;
overflow: hidden;
}
.top .right {
text-align: justify;
width: 650px;
}
.top span, .top h2 {
color: #E02C33;
font-size: 1.8em;
}
.top h1 {
color: #B02025;
font-size: 4.7em;
text-transform: uppercase;
}
I have two issues here:
How can I justify both the <span> and <h2> to their equal lengths (my justify is not working as expected)
How can I constraint "CARMEN" such the width and height are pre defined, the spacing between characters is rendered by the browser
The problem with justify is that the last line is usually no justified, because the letter spacing would be too long.
If you can use CSS3, there are new attributes, which make this possible:
http://www.css3.com/css-text-justify/
If the header always stays the same, you can also adjust the font-size and letter-spacing attributes, until it fits.
One important thing is that while creating graphics initially in adobe photo shop or illustrator etc. is different and when we implement in actual webpage the output may vary little bit in some cases. So we have to write css like that so we can accomplish the desired design. Thanks.
see fiddle for code and demo
Fiddle: http://jsfiddle.net/ybf25/3/
Demo: http://jsfiddle.net/ybf25/3/embedded/result/
Note: As i don't have the Rose image so i was not able to create Demo as your given image in question.
See screen shot for output: Please open the screen shot in new window to see clear image.
I am currently finishing a site that the client wants to work on all browsers. However, there seems to be a CSS issue which I can not get around. The border around this page seems to start from the middle of the page, as opposed to surrounding the entire page. It works on all other browsers though. I am guessing that it is a float problem, but the #contact-form underneath has basically the same CSS applied to it but the border still surrounds it, while the #info seems to have broken out of the border.
The webpage in question is http://lunaskymoda.co.uk/contact-us/
The only validation error is with an unregistered keyword "Nextgen", but i doubt that is the problem. I have spent an entire day tackling this and cannot seem to come up with a reasonable explanation as to why this is happening.
the CSS for the possible HTML elements producing the error are:
#main #main-content {
border: 1px solid white;
display: block;
margin: 12px 0;
background: black;
}
.contact #main-content .info {
margin: 10px;
width: 300px;
font-size: 14px;
color: white;
float: right;
display: block;
}
You're not the first one to have issues with ie6 :)
The problem is of course the "clear: both" of the clear class not being honoured, so you need to hack it.
Here's a possible approach:
http://damienhowley.wordpress.com/2009/04/01/ie6-hack-replacing-clearboth/
You may also try to replace the <div class="clear"></div> by <br clear="all">.
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)