Highlight wrapped lines with CSS - html

Is it possible with CSS(3) to visually/textually highlight line breaks, which were automatically inserted by browsers? Something like ↻ at the end of each wrapped line.
With sourcecode it's important to see where lines were wrapped, since newlines can be significant. Letting the user scroll horizontally isn't a good idea neither …

As far as I know, there is only way to do this using pure CSS, via the :first-line pseudo-element
Concept
Add a "visual indication" to every element, by default.
Select every :first-line element, to reset the styles.
Demo: http://jsfiddle.net/djpTw/
<code>
<div class="line">Too much code at one line. Learn to write shorter lines!</div>
<div class="line">Lonely line.</div>
...
</code>
CSS:
code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line { color: red; /* Visual indication */ }
code .line:first-line { color: #000; /* Default color */ }
The demo is rendered as (black by default, red as "visual indication"):

Sadly, this is not possible in pure CSS. I suspect you might be able to fake it using a tall thin graphic attached to the bottom right with no glyph in the bottom and then glyphs proceeding up as far as your tallest reasonable run-on, with the glyph spacing carefully coordinated to your line-height.

Related

Newline between html element breaks html layout

I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.
For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element:
https://jsfiddle.net/xew2szfu/1/
<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
Here I wrote the html with a newline, as you normally do, and everything got broken:
https://jsfiddle.net/rL1fqwkc/1/
<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.
It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.
There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:
Negative margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Very simple, you can have a nice html format, but moves the element over to hide the space.
Set the font-size to 0:
.recommend-friend__slider{
font-size: 0;
}
.recommend-friend__dialog {
font-size: 12pt;
}
Or, my personal favorite, skip the inline block and use flexbox instead.

Fixing html and css

First.. How do i fix this:
http://jsfiddle.net/kLjcq/
I am seeing this properly formatted on my browser..!
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_31_20-ViIvXLQf.1360273538.png
http://picpaste.com/pics/Screenshot_from_2013-02-07_13_37_15-GBjeEsL8.1360273595.png
But on the fiddel it messes things up.. :( What happened? HOw do i fix this?
Second is.. if i have long string... it shoots over that light gray border of the heading
"Reading from xml..." thingy
What I am looking for is that the maxiumum spread of this text goes upto that border.. and after that.. it breaks to a next line.. so that text is enclosed properly..
In div.content
div.content {
background-color: #add8e6;
display:inline-block;
margin-top: 20px;
border-radius: 10px;
position: relative;
top:-5px;
}
I tried to add limit and stuff.. but it limits the blue box to a pixel value
but instead i want text (and blue box) to limit upto certain limit after which it
breaks to a new line...
any clues.
Thanks
You're absolutely positioning the .checksheet class. This removes it from the document flow. Other elements like your .content-class don't care for it.
I don't know why you use position: absolute; in this context, but it's producing your mistake.
Your fiddle is breaking because you're using absolute positioning. When the screen is narrow, your elements in the checklist are wrapping around, but the elements that follow are positioned in a way that assumes the preceding element is only 1 line instead of 2.
Without the actual markup relating to your second question, we can only guess at what the actual problem is. However, since you're using pre in the sample provided, the culprit is most likely there. What you need is to add a property like this:
white-space: pre-wrap
Without this property, the pre tag generally does not allow elements to word-wrap, which will cause it to take up as much horizontal space as possible to display all of the text.

Adding Vertical Space between Line Breaks

This seems like a common CSS question, but for some reason I cannot find the answer to it.
consider the following Code:
<div style="width:50px;border:1px solid #000">
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
With CSS ONLY I want to add vertical space between the <br/> tags.
line-height works for the entire content, and attaching CSS to <br> (i.e: br{ margin:10px 0}), doesn't seem to work either (in Chrome at least), so I am wondering if this is even possible.
Thank you.
jsfiddle
​
br
{
content: " " !important;
display: block !important;
margin:30px;
}
​try this
You can try this, works on chrome too, content: " " does the trick for chrome, else is happy with margins
Demo
HTML
<div>
THis is a looooooooong text. and it goes on and on and on and on and on and on and on and on and on and on
<br/>
2nd line
<br/>
3rd line 3rd line 3rd line 3rd line 3rd line 3rd line 3rd line
<br/>
last line
</div>
CSS
div{
width:150px;
border:1px solid #000;
padding:5px;
}
br {
content: " ";
display: block;
margin: 10px;
}
​
​
Yes its possible. There are several issues related that you need to understand.
1) You're using margins. Sometimes margins will be collapsed or removed depending on content. Have you tried using padding instead? You will get different results. I don't have any direct links off hand but google around and make sure you understand the important differences between margins and padding.
2) Learn about the box-models. If you don't know about box-model: border-box, then you need to go study it. Chris Coyier of css-tricks.com has an article on it. I'm pointing it out because its directly pertinent to issues like this one.
3) display:block I don't know for certain but I think probably defaults to display: inline. You can any element it and always make it act like a standard block DIV if you set display: block as one of the properties. Again, Chris Coyier has some great information on this. Please make sure you have a deep appreciation of display: rules and their caveats.
Just adding display: block and either using margins or padding will fix your problem. If it doesn't, there's something stupid simply I'm missing. I've done this type of thing before. In fact, I've completely removed tags from Wordpress theme markups using display: none to completely reformat image gallery outputs.

How to space text like using tab on website?

I just got another assignment for web design. And I was curios how to space text like this.
The issue here is not the heading nor the text on the left. I have problem with the time on the right. We are forbidden to edit html which looks like this:
<div class="oteviracka">
<h2>Otevírací doba</h2>
<p><strong>Po – Pá:</strong> 11:00 – 23:00</p>
<p><strong>So:</strong> 11:00 – 24:00</p>
<p><strong>So:</strong> 11:00 – 22:00</p>
</div>
I tried almost everything but the code was always "dirty" and I doubt it is done by the way I did it. (First-child spacing and so).
So my question is How to space text like using tab with CSS?
Use the rule display: inline-block on the strong elements. This rule is combination of inline but with the ability to specify a size:
p strong {
display: inline-block;
width: 150px
/* IE7 */
*display: inline;
zoom: 1;
/* IE7 */
}
​DEMO
Further reading:
CSS Display rule (on SitePoint)

CSS: Vertical-Align text?

I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.