I'm having a bit of trouble styling some text that is being gathered from a database. Is there a quick way of stylizing the article content inside?
This is where I have it being pulled from the database
<div class="col-4 col-fright">
<h1 class="article_title"><?=$this->article->name?></h1>
<?=$this->article->content?>
<?if(count($this->siblings) > 0){?>
<hr>
<strong>You may also be interested in these articles:</strong><br>
<?foreach($this->siblings as $s){?>
<?=$s->name?><br>
<?}?>
<?}?>
</div>
I figured I could just throw a span class around the article content but that would apply the style to all the text.
Here's an example of what the text may look like when I pull it
The title looks fine since I was able to put it into a tag, but everything else is needs work.
I can't think of a quick way. I suppose you could start by looking for the first occurrence of "[more]" and either removing it or properly formatting the content to show the rest of the article once [more] is clicked.
There's not much you can do unless you are reasonably confident about the structure of your source. For example, applying some logic like "if the number of works on a line are fewer than 7 and contain no periods, wrap it in tags" would produce sub-headers in this example, but might break in others that have unpredictable content.
It seems as though you're looking for artificial intelligence to format your document.
Related
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
I'm fixing an old WordPress syntax highlighter plugin (the plugin owner abandoned it), and while fixing the PHP errors was easy, while I'm fixing it, I might as well improve accessibility as well.
My question is regarding the HTML structure for the code. I want to show the number on one side and the code next to it:
I figured the HTML would be something like this:
<section> <!-- Maybe article? -->
<header>
<h1>Sample HTML</h1> <!-- Maybe <h3> would fit my blog posts best -->
<div role="toolbar">toolabar buttons here</div>
</header>
<ol>
<li><span class="sh-r "><div </span><span class="sh-e ">class</span>=<span class="sh-s ">"grid"</span><span class="sh-r ">></span>
...
</ol>
</section>
But I'm not sure. Should the code be in an <ol> or a <table>? Are the spans for changing the color ok? Is the toolbar role appropriate? Am I missing something? If anyone has an example of an accessible code highlighter, I'd love to see it.
The way it is right now, it's a table with all numbers in one <td> and all the code in another!
Should the code be in an <ol> or a <table>?
I would say that <ol> is more appropriate than <table>.
Using a table here looks a bit like presentational purpose only. I wouldn't call a table with line numbers on the left and code lines on the right exactly a data table.
Are the spans for changing the color ok?
As as default and because you can't do better in HTML anyway, I would say yes, it's fine.
IF HTML has more specific elements to semantically indicate keywords, blocks, numbers, strings, variables, etc. then you would be strongly recommanded to use them instead of spans.
But there aren't really such specific elements, except maybe <var, <kbd> and/or <samp>; but their semantic signification has never been very clear.
However, as a higher level, you should be using <code> or <pre> to enclose the whole code, to mark it as such.
The problem is that, if you use those two elements, you can no longer use <ol> or <table>.
Perhaps the most acceptable compromise would be <ol><li><code>One line of code</code></li>...</ol>.
In any case, for specific things like marking keywords inside the line of code, you don't have another better choice than <span> in what HTML has to offer.
Is the toolbar role appropriate?
Given that you haven't given the code inside the div, it's a bit difficult to answer.
Normally, a toolbar should contain a set of buttons or occasionally other controls like dropdown menus, and in principle nothig else then that.
If the content of that div corresponds to this simple definition, yes, the toolbar is appropriate. Otherwise, no.
Not that it isn't very worth it to use the toolbar role for less than 3 buttons
As I can imagine here, this div contains only a single button to copy the code in clipboard. If it's indeed the case, then by the definition above, it isn't very appropriate.
I would like to add an entry to the table of contents of a wiki page that links to an arbitrary point inside the article. In my use case, I want to link to multiple 'header rows' inside a long table.
I tried both
<h4 style="display: none;">My invisible TOC entry</h4>
as well as
<div style="display: none;">My invisible TOC entry</h4>
However, it seems that the element does not get rendered at all. How do I add such an invisible entry?
I'll reply to your use case directly: «I want to link to multiple 'header rows' inside a long table».
I usually recommend to use normal headers in such cases. You will even be able to do section editing of the sub-table (or row) without breaking the general table. An example of sections which reuse existing cells/headers is the Feature map on mediawiki.org.
Alternatively, to have really invisible anchors, you can just add a <span id=linkme></span> or similar, often done via an {{anchor}} template.
Middle ways, i.e. anchors which are actually sections and display in the TOC, but are hacked and made inservible for viewing and section editing, don't really look like "solutions" to me.
I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
I'm having a difficult time doing this probably because I'm not sure what to even call it. But a client wants me to put a small number one in some text at the end of a sentence - wich indicates that they should find the small 1 at the bottom of the page to read more details about that particular sentence. You see this type of thing a lot on container and supplement labels. Can this be accomplished with html? Please let me know if you need clarification.
Kind of like this except instead of an astrick, a small one:
*These statements have not been evaluated by the Food and Drug Administration. This product is not intended to diagnose, treat, cure or prevent any disease.
You must be looking for superscript.
<p>This is <sub>subscript</sub> text.</p>
<p>This is <sup>superscript</sup> text.</p>
In practice:
This is subscript text.
This is superscript text.
Use the character “¹” U+00B9 SUPERSCRIPT ONE. If you do not know how to enter it in your authoring environment (in Windows, you can usually enter it by Alt 0185), you can use the entity reference ¹.
Unlike <sup>1</sup> (which is what most people would use), this means using a character designed by a typographer to fit the font. The stroke width is correct, and so is the vertical placement. Using sup tends to mess up spacing between lines, among other things.
However, footnote references don’t work that well in HTML documents. Especially if you want to make the reference a link to the footnote itself, a tiny little superscript is very poor usability and accessibility. An expression like “[1]” is much better.
Well I think this problem has to do with citation-referencing a resource. You can do the following:
At the end of a sentence you can write the number of the reference(references are located at the bottom of a webpage most of the times) like this-actually is a HTML anchor tag:
The sentence goes here.<sub>1</sub>
Then at the bottom of the screen you can write the reference like this:
<a name="1">The reference details go here.</a>