I'm trying to wrap text in some big nice double quotes. I looked at this tutorial, but seems a little more complicated than I thought it should be. My gut tells me someone here in SO knows a smarter way. I'm open to anything: CSS, or PHP or Javascript, or Jquery (but preferably not JS/Jquery)
The tutorial doesn't look too complicated to me—I think their method is quite a good one.
If you don't like specifying one of the background images in :first-letter, you could use CSS3's support for multiple background images:
blockquote {
background: url("open-quote.gif") top left no-repeat,
url("close-quote.gif") bottom right no-repeat;
/* Other rules... */
}
...but this will only work in some browsers.
If I were you, I'd use the method described in the tutorial.
I'd recommend following the method they suggest: just add some styling on a blockquote element to give it a background image of your large quotes.
If you wanted a pure CSS solution, you can use something like this:
blockquote:before, blockquote:after {
content: '"';
font-size: 400%;
}
Of course, you'll have to play with the line heights and margins to get it looking ok, but even then, it's not gonna work in IE.
Related
I’m writing a custom parser/data extractor for some pretty shitty HTML.
Changing the HTML is out of the question.
I will spare you the details of the hoops I’ve had to jump through but I’ve now come pretty close to my original goal. I’m using a combination of DOMDocument getElementByName, regular expression replace (I know, I know...), and XPath queries.
I need to get all the text out of the body of the document. I would like for the navigation to remain a separate entity, at least in the abstract. Here’s what I’m doing now:
$contentnodes = $xpath->query("//body//*[not(self::a)]/text()|//body//ul/li/a");
foreach ($contentnodes as $contentnode) {
$type = $contentnode->nodeName;
$content = $contentnode->nodeValue;
$output[] = array( $type, $content);
}
This works, except that of course it treats all of the links on the page differently, and I only want it to do that to the navigation.
What XPath syntax can I use so that, in the first part of that query, before the |, I tell it to get all the text nodes of body’s children except ul > li > a.
Please note that I cannot rely on the presence of p tags or h1 tags or anything sensible like that to make educated guesses about content.
Thanks
Update: #hr_117’s answer below works. I’ve also found that you can use multiple not statements like so:
//body//text()[not(parent::a/parent::li/parent::ul)][not(parent::h1)]
You may try something like this:
//body//text()[not(parent::a/parent::li/parent::ul)]|//body//ul/li/a
//body//*[not(self::a/parent::li/parent::ul)]/text()[normalize-space()]|//body//ul/li/a
(test)
I've got a fiddle with the data here:
http://jsfiddle.net/ktpmm5/Z5z8n/
and page is staged here:
http://steppingstonez.com/daretorepair/magazines.php
Basically my paging element gets shoved to the left and lays over top of my heading. This happens only in IE 8 - works fine in Chrome, FF and Opera. I'm going crazy trying to figure out what is wrong. html validates fine.
Any ideas?
Quick solution:
To make it roughly work, change the paging wrapper to have the position: relative, and float the ul.paging right (remove the position).
You'll need to add height into the head_text to include the paging wrapper (as paging_wrapper is now positioned out of the flow, so its height does not count).
Longer solution:
Even with the fix above, you still have the problem that a long title will overlap regardless, so I would define the area/width of the header (making it wrap if too long) and also restrict the area of the paging device (by limiting number of buttons that show).
Another quick solution: Specify the correct width for your .paging CSS class (UL). For example a width of 220px seems correct.
.paging {
...
...
width: 220px; /* new */
}
I think it seems more of an issue with utilizing negative margins. You have both a margin-top on the paging_wrapper and the paging li a. This is probably causing some weirdness for support in IE.
I want to display html code just like what your see here.
<textarea><script id="ff">gdgdgs</script></textarea>
and have it displayed without altering the page. and have it nicely within a box like this.
How is this achieved?
I think the best way is to actually have a look and see how Stackoverflow does it! :)
If you right click on your code box in Chrome and select inspect element, it'll show you the markup for that box. It's so useful to be able to do this, obviously not to rip people off, but learn how other people put websites together, and how they achieve cool effects like code boxes! :)
Interestingly enough though, if you simply right click on the page and go to view source, you'll see something slightly different:
<pre><code><textarea><script id="ff">gdgdgs</script></textarea>
</code></pre>
So we can see here that this is what the mark-up for that box looks like before the page has loaded and any JavaScript is run. When the page starts to load on the client side, some JavaScript will be run which takes the above mark-up and tranforms it to look like the mark up you see when you right click on the code box and inspect it in chrome. Doing this gives you a real-time view of the HTML on the page:
<pre class="lang-php prettyprint">
<code>
<span class="tag"><textarea><script</span>
<span class="pln"></span>
<span class="atn">id</span>
<span class="pun">=</span>
<span class="atv">"ff"</span>
<span class="tag">></span>
<span class="pln">gdgdgs</span>
<span class="tag"></script></textarea></span>
<span class="pln"><br></span>
</code>
</pre>
So if you have a look, you can see the transformed code uses a pre tag. This basically says, anything between here you can treat as a literal or in otherwords, keep line breaks and spaces where I left them!
As well as using the pre tag to wrap the code, you can also see that they use different CSS classes. This is to achieve the color coding you can see.
They also use a code tag which as far as I can see, is very similar to pre, only it makes your markup a bit clearer by saying, within this tag, you should expect to see code. It's probably more semantic more than anything, like the HTML tag artical. In most browsers, it'll also change the font for text inside the code tag to mono-space, which is a bit more code like! :)
You can go furhter into this and see exactly what their CSS classes look like, from this you can start to build a mental picture to see how their mark-up and CSS works together to product their nice code boxes.
Of course, if you don't want to roll this functionality yourself, you can use someone elses framework to achive this. SyntaxHighlighter for example if widely used and recommended.
With Syntax Highlighter, you simply reference the Syntax Highlighter CSS and javascript, and then only need to wrap your code in one pre tag to get it working, something like below:
<pre class="brush: xml">
<textarea><script id="ff">gdgdgs</script></textarea>
</pre>
It might be worth a look!
Hope this helps! :)
you could use
>
>
and
<
<
This website here can help you with your particular problem. It converts your tags/html/javascript to ASCII. If you need a function, here it is. It converts the passed tags/html/javascript to ASCII. The ASCII code is escaped and treated as text by the browser. You can latter use the generated ASCII and add it to the box.
function stringToAscii(s)
{
var ascii="";
if(s.length>0)
for(i=0; i<s.length; i++)
{
var c = ""+s.charCodeAt(i);
while(c.length < 3)
c = "0"+c;
ascii += c;
}
return(ascii);
}
Use the Encoded Version like this:
<textarea>
<script id="ff">
gdgdgs
</script>
</textarea>
Is this what you mean?
<textarea><script id="ff">gdgdgs</script></textarea>
Look up HTML entities.
Yeah, just include it like:
$(document).ready(function(){
var a = '<textarea><script id="ff">gdgdgs</scrip'+'t></textarea>';
$("div").css('background','red').text(a);
});
I use the <xmp> element.
I need to quickly add prefixes to all of of my classes and ID's and it's quite a large CSS file. I was thinking a quick regex string but so far I've failed. Any ideas?
I've tried simple things like:
\#([A-z0-9]+) {
Which will let me replace with #prefix_$1 but it doesn't take into account:
#id {
#id.class
#id,
etc. I can't just replace all #[a-z0-9] because it will attempt to grab background-colors and so on.
I also need to replace all the classes, which is even more confusing for me.
You could search:
\.(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)[^}]+{
\#(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)[^}]+{
Should find all your class names and id names
With RegExr, use this:
(?<=#|\.)(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)(?=[^}]+{)
Edit:
Here's a link to a test on google's CSS
http://regexr.com?2ugv1
You could try this [#|\.][\w]+\.?([\w\-]+\s?) it worked on these
#id {
#id.class {
#id, #otherId {
#class-dashed
#class_dashed
ul li:after {content: " #id.class { ";}
.class {background-color: #fff250}
#id.class {color:#ff}
Also found a good tool to play around with different options. There will still be a problem with the colors, but you can't really get rid of that since they follow the same rules as the ids.
update
excluding the : from the results to not match colours.
(?<![: ])[#\.][\w]+\.?([\w-]+\s?) you'll need a regex engine that supports negative lookbehind, not that familiar with php so don't know if it has it, but I would imagine it does.
It works for me in my stylesheet with all the cases i have;
Find
([\.])([^\d][a-z0-9-_]+[^{])
Replace
$1prefix .$2
I'd go with something like this:
/([#\.])([^\d][a-z0-9-_]+)/ Replace with
$1PREFIX_$2
However beware that it would catch colors as well, (if done with lowercase letters) I'm working on a workaround right now.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
text-overflow:ellipsis in Firefox 4?
I have the same issue mentioned in Truncating long strings with CSS: feasible yet?. It's been nearly two years since that post, and Firefox still ignores the text-overflow: ellipsis; property.
My current solution is to truncate long strings in PHP like so:
if(strlen($some_string) > 30)
$some_string = substr($some_string,0,30)."...";
That more or less works, but it doesn't look as nice or as accurate as text-overflow: ellipsis; in browsers that support it. The actual width of thirty characters varies since I'm not using a monospace font. The XML fix and jQuery plugins posted in the other thread appear to no longer work in Firefox either.
Is there currently a way to do this in CSS that is browser independent? If not, is there a way to measure the width of a string given a font and font size in PHP so that I might more accurately place my ellipsis?
This answer might be useful for getting your output truncated to the nearest word, and then simply append a … (…) HTML entity onto the end of the output to get your final output.
As you've noticed there's not sufficiently wide browser support yet the CSS solution yet, and you've still got to worry about old browsers too.
It is a shame that all browsers don't handle the same CSS features. However, you could always do something like this using JavaScript (with help from jQuery).
Here's an example of how such a thing might look: http://jsfiddle.net/VFucm/
The basic idea is to turn your string into an array of words, like so:
var words = full.split(/\s+/g);
Loop through them and take the first N (in this case I chose 24) and push them into another array:
for (var i = 0; i < 24; i++) {
short.push(words[i]);
}
Throw them back into the HTML element they came from:
$('.snip').html(short.join(" ") + ' <span class="expand">...</span>');
... here I added a "link" to expand the shortend text. It's made to look and act like a link using CSS. I also provided a function to replace the shortened text with the foll text again:
$('.expand').click(function() {
$('.snip').html(full);
});