My goal is to provide something like a "Read More" link next to a text block. It is automatically added before the content is sent to the client and the block that contains it should be adjacent to the prior text, just as if its part of this text. The problem is that the text block contents are authored using TinyMCE, thus the content will be packed up in a variety of tags (mainly the paragraph tag) - thus the following content will be pushed to the next line (or block).
So before going through the pain of deconstructing the content of the textblock serverside to decide where and how to attach the other block, i thought there might perhaps be a way to get this done using pure CSS. I have a feeling it won't be possible as i think it would require the adjacent block to sort of override properties of the prior block, but then again there might be a thing or two that i missed about all this CSS/inline business.
I created a JSFiddle here
Thank You for any constructive input on the matter!
see this fiddle: http://jsfiddle.net/D2RnS/5/
p + p, .adjacentBlock { float : left; }
I just floated left the second paragraph and the adjacentBlock. Doing so remember to also apply some kind of float clearing to the parent container (the <div> in your example)
You may use use pseudo-elements in css, by adding an ID to your previous tag:
#block:after {
content:"You will have this appended.";
}
You can see the effect here: http://jsfiddle.net/D2RnS/14/
Related
I'm making a rich text editor which is like a clone of Google Docs. For reasons I won't get into here, each line in the text editor is wrapped into its own div container. For example, if there's 3 lines of text, there will be 3 child "line nodes" (rendered as an unstyled div) in the text editor. And within each line node there are inline span elements to control styling such as Bold, Italic, etc.
The issue I'm having is I can't understand why there is an unsightly vertical gap of whitespace between each line when selecting text over multiple lines. I am using Draft.js for this, but from what I can see it shouldn't make a difference; there's no styling or margins applied. I've even tried making every line div and its span elements exactly the same height but the problem persists.
My guess is this is caused by some native browser behaviour. All I really care about though is: can I "fix" it? I mean, I know it's possible because Google Docs doesn't have this spacing issue when selecting text... But then again it uses a completely custom rendering engine with custom cursors too. Thanks for any suggestions
edit: so a temporary workaround I've found (see image below) is to reduce the height of each div and span to a fixed value (in this case, height: 16.4px). But for obvious reasons, this isn't an ideal solution. I'm still looking for a "proper" way to implement whatever styling I want and not have these gaps appear between adjacent divs when selecting text
I believe your talking about line-height in which you can control the space between two elements / texts.
Try it out below:
div {
line-height:100px;
}
<div>Hello World!</div>
<div>How are ya?</div>
Thank you for all the suggestions. Turns out this is quite a challenging issue and there's very little (if anything) that can be done with pure CSS. Only the height attribute of div or span elements appear to have any visible impact on text selection. Inspecting the Google Docs elements reveals they use their own custom selection engine:
Closing this because I at least know how a solution might be implemented now, even if it would be very complex and time-consuming. Thanks again for the suggestions.
They are both block elements. So why can I nest a <div> inside a <div>, but can't nest a <p> inside a <p>? (Well, I can, but the second <p> just starts a new block.)
I have read about the div tag and p tag, but I don't see anything there that explains it. If it is there, then it goes over my head.
For the record, I do not want to nest a p tags, I am just trying to understand the fundamentals more.
Per your links (in the Permitted content section), <p> is allowed to contain phrasing content, while <div> is allowed to contain flow content (which includes the phrasing content element types).
On a practical level, browsers also typically apply margin to <p>.
both are block elements, but <p> tags come predefined with some margins/padding. you can inspect both elements in any modern browser and see the default properties
funny thing is, in the name of consistency, all elements have redefined by things like bootstrap/boilerplate CSS files that give all elements the same starting look and feel so we no longer have to guess which tags have what default properties. Which sort of goes against the original HTML spec for the sake of our sanity
The div is the quintessential block level element, and the span is the inline counterpart. They are the simplest possible form of that display type, with no other properties. In a great many cases I will give either of them the style:
display: inline-block;
This makes them behave in a very handy way. For div it means boxes that will easily sit next to each-other, while maintaining their width and height as defined. For the span I can use this to make colorful rectangles. The inline-block display is great for so many things, but I have never seen an element that starts as an inline-block without anything else going on.
Images (img) are, but they are obviously not suited for the same things as a div, they have that style, but they fulfill a different purpose.
So is there an element that I don't know of that is the quintessential inline-block, or is this left out?
And if not, why? The uses of inline-block are numerous, so it seems like there should be some element that takes that basic form.
There's no such element, and there are some good reasons why not.
inline-block has several uses in contemporary web design. However it is not part of the original design, which only includes block and inline elements. Instead it derives from <img> as added by NSCA Mosaic. (Which uses the wrong markup and helped defeat the original "responsive design". I think we've only just started to fix the problems with img).
Further down the timeline, inline-block still wasn't part of IE4 or 5, or any version of Netscape. It wasn't part of the early HTML4 era. So we wouldn't expect to find your hypothetical element in that version of the standard. inline-block only appears in CSS2, which came after HTML4. (Look at the reference section in each standard).
Unlike block, inline-block is affected by whitespace in the markup. It's implied by the name, and it's what you'd expect from looking at <img> in the middle of some text (aka wordprocessor object anchored "as character"). But beyond its origins there, the whitespace-dependent markup soon becomes very troublesome. I wouldn't expect W3C HTML5 to enshrine this in a new element.
Specifying it would certainly involve argument about "semantics", separation of content and presentation etc. (As well as what to call it :). And if the default rendering makes whitespace significant - is that not part of the semantics of that element? Consider using images to represent words - or individual letters of a word (with appropriate alt text). This illustrates that the presence of whitespace (or not) around this element would be semantically significant, just like the presenceofwhitespaceseparatingwordsissemanticallysignificant. That seems like a big problem to me.
inline-block is often promoted as a modern alternative to using float everywhere. But neither is genuinely suitable. This is why CSS3 will standardize new layout modes: "flexbox" and "grid", to support modern responsive designs with genuine, clean markup. No dummy markup (or dummy generated content). No hacking around whitespace-dependence.
The only elements I can think of that have an in-line appearance, but allow for a width and height to be set, are:
img,
input,
textarea
select, and
button
The only element here, though, that can take HTML content is the button element; which is not an ideal use of the button since it's intended to be an element with which the user might/should interact; rather than simply a container element.
While you may have multiple uses for such an element, there's no convincing reason, given the ease with which the display property might be changed, that the W3C, or any other authority, should explicitly define one; especially given that the only difference between inline and inline-block is the ability to assign dimensions and margin.
The img tag is inline-block by default:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img
Edit: You can check this SO question: Is <img> element block level or inline level?
Is there any downside to converting img from inline-block elements into block objects with the display: block CSS property?
Most of the time, I want them to be block elements. Any useful inline aspects that I am losing? (Perhaps I am not seeing some as useful?)
Should all images be converted into block elements by default? Why are they inline-block elements according to spec?
P.S. I am asking this with considerations for layout via positioning & floats, and surrounding elements.
Well considering that a block will force anything after to line break, there is only one scenario where it would be bad:
If you plan to have another inline element (text, another image, span, etc) beside it
There is one downside :
If you plan to horizontally center an image applying "text-align:center" to the parent element, you cannot display the image as block or inline-block.
Put img { display: block; } in your CSS and forget about it. In the extremely rare instance that you need something different write an exception.
One hack found for block display:"block".
I had this image and the wavesurfer audio wave which I wanted as inline.
But, the display:"block"; in the js of wavesurfer was not allowing it.
What I did was, saved this cdn file locally and changed the display to inline and position to absolute which solved my issue. The change is supposed to be done where the wave element is created.
Hope this helps someone. Thanku wavesurfer creators for such an amazing js.
I have used CSS pseudo-element selectors like many others, mainly just to say I've used them.
But I am racking my brain and struggling to come up with a reason for their place alongside markup.
Take the following example:
<p>Hello</p>
p::after {
content: "*";
}
What is the advantage of using this over using <span> tags?
Am I missing the point of ::before and ::after? Is there some rock solid reason for using them over pre-existing semantic markup?
The CSS2.1 spec says this about generated content:
In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.
Basically the purpose is to minimize pollution of the content structure by "content" that is otherwise more suited as presentational elements, or better to be automated.
If you're talking about :before and :after: They're used as presentational elements for cases where adding more elements into the actual document would be mixing structure with appearance. A few cases I've seen:
Bullets in bulleted lists
Quotes around q elements
Stylish shadows
Decorations and the beginning or end of text
These particular pseudo-elements are designed to add “content” that’s actually just a visual aid.
The prime example is adding quote marks around the <q> element, which Firefox does using these selectors in its default stylesheet. Some people also use them to clear floats.
You shouldn’t use them for actual content, despite the name of the CSS content property, as non-visual user-agents (i.e. screen readers) should ignore them.
I’ve never come up with much use for them, although I did once use them to add little Unicode icons to hovered links on a personal site — like you, pretty much just to say I’d used them.
Honestly, the only worthwhile useage is to force elements to have the correct size in the dom. Use this code for example:
<div class="container">
<div>this div is floated left</div>
<div>this div is floated left</div>
</div>
Typically you would have to specify an exact or min height for the .container div. if you were to apply ":after" with some very simple css, any background you applied to the .container would actually show up (in almost every browser) properly, with few to no shims.
.container:after{
content:'.';
height:0;
line-height:0;
display:block;
float:left;
visibility:hidden;
}
Now try that example, applying a background color or image, and you'll see that the .container div always has the appropriate height (which would be the total combined height of the inner contents) even if all the inner html is floated (as is the case in most ul/li css buttons).
I also use an after on every div that I wrap all my content in per html page. This is due to the possibility that all of the content on a given page could be floated, and I want to make sure that my content div always has the correct size/padding with the appropriate background.
CSS3 Pseudo Selectors also include essential ones like :link, :hover, :active, :focus, :first-child, :nth-child. It's impossible to make a useful site without most of these.
As for the less commonly used pseudo-selectors like :after and :before, they're useful in certain cases where the content is dynamically generated and you want to insert something before a specific element or tag.