I'm trying to make text which is either invisible until moused over, or, has a "show" / "hide" button, or some other thing, so that it is not visible until the user interacts with it in some way.
I'm trying to do this on a github wiki page. (Specifically it's for a short self-quiz.)
Basically I want to get a similar effect to what SO achieves with the >! markup:
Hoho! Spoiler text!
as described in these meta posts.
The same markup doesn't work in github, I guess that it's an SO extension?
I saw this issue about using spoiler text in comments on github, which was closed, but I thought there might be a different answer for the wiki pages, or a different solution based on HTML or something?
Does anyone know if there's a way to do this, or if it is definitely unfortunately impossible?
GFM supports a subset of HTML. For now, you can wrap your question in a <summary> and your answer in any standard HTML tag like <p> and wrap the whole thing in the <details> tag.
So if you do this
<details>
<summary>Q1: What is the best Language in the World? </summary>
A1: JavaScript
</details>
You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test
Browser support is an Issue.
The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RST etc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.
Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on GitHub:
Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary> (i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary> is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).
<details>
<summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code><summary></code> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
## *formatted* **heading** with [a](link)
```java
code block
```
<details>
<summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
<!-- have to be followed by an empty line! -->
A bit more than normal indentation is necessary to get the nesting correct,
1. list
1. with
1. nested
1. items
```java
// including code
```
1. blocks
1. and continued non-nested
</details>
</details>
Currently it renders as the following with the expected parts expandable and collapsible:
Initial state
Click on summary
Click on nested summary
Literal spoiler text as shown in the question is not supported in GitHub Flavored Markdown or the original Markdown implementation.
However Markdown supports inline HTML, and GitHub allows a subset of HTML tags to remain in the rendered output. As described in other answers, <details> works on GitHub.
If that's "spoilery" enough for you, feel free to use it.
The html element <details> and <summary> can do it, have a look:
http://caniuse.com/#search=details
Support is poor for Firefox & Edge, but there may be some pollyfills...
If editing the CSS is an option for you, you can simply use
[](#spoiler "Spoiler Filled Text")
and then use (pure) CSS to give the correct appearance.
a[href="#spoiler"] {
text-decoration: none !important;
cursor: default;
margin-bottom: 10px;
padding: 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
display: inline-block;
}
a[href="#spoiler"]::after {
content: attr(title);
color: #FFF8DC;
padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
cursor: auto;
color: black;
transition: color .5s ease-in-out;
}
<p>
</p>
(Vaguely inspired from this code)
A different solution from the details / summary tags, but also using native html is to use a span with a title. I was doing something like this recently in org mode.
Related
Note: this question is about the html <ruby> element. It is not related to the ruby language.
I have a web page that contains ruby markup elements. Here's a simplified example:
<html>
<body>
Before
<ruby>
<rb>XYZ</rb>
<rt>This is base</rt>
</ruby>
After
<body>
</html>
I would like my uses to be able to select the text, copy/paste to another program, and get
Before This is base After
But, at least in Chrome, what is copied is
Before XYZ This is main After
How can I alter my markup to get this behavior?
I'd be thrilled with a browser-independent solution, but even Chrome-only would be useful.
FWIW, the original draft spec seemed to call for this to work somehow. https://www.w3.org/TR/ruby-use-cases/ contains the line "Ruby text annotations should be disregarded in some situations, such as finding text or copying text". But there is no detailed discussion of this in that document.
Found the answer!
Give the rtelement CSS of user-select: none.
(See answers in How to disable text selection highlighting for rationale and browser-compatibility details).
I would like to have a <ul> inside the help_text of a django form field.
Unfortunately django renders the help_text inside a <span>.
According to the HTML spec a <span> must not contain a <ul>. At least that is what my validation tool says.
Here is the source of django: https://github.com/django/django/blob/master/django/forms/forms.py#L283
def as_table(self):
"Return this form rendered as HTML <tr>s -- excluding the <table></table>."
return self._html_output(
normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
error_row='<tr><td colspan="2">%s</td></tr>',
row_ender='</td></tr>',
help_text_html='<br><span class="helptext">%s</span>',
errors_on_separate_row=False)
What can I do to get <ul> in the help_text and valid html.
Overriding as_table() does not work, since the form is from "core_app" and the field is from a plugin. Both are two different git repos and I don't want to modify the core just because of this.
As you already mentioned, in HTML there is a concept of block and inline elements.
In short block elements generate a new line and may contain other block and inline elements. Inline elements don't generate a new line and may contain other inline elements, but not block elements.
MDN web docs offers more information on block and inline elements.
Since span is an inline element, you can't place ul which is a block-level element inside. Or, you could, but then it's not a valid HTML, and that's not what you want.
Since you're using a third-party code, modifiying it could introduce other problems.
You could fork it, modify the parts you need and then use your fork. But when that third-party code gets updated, you have to repeat the whole process.
In cases like that you could just do monkey patching.
For your particular problem we could therefore do something like this:
from django import forms
class MyBaseForm(forms.BaseForm):
def as_table(self):
"Return this form rendered as HTML s -- excluding the ."
return self._html_output(
normal_row='%(label)s%(errors)s%(field)s%(help_text)s',
error_row='%s',
row_ender='',
help_text_html='<div class="helptext">%s</div>',
errors_on_separate_row=False)
BaseForm.as_table = MyBaseForm.as_table
You can place this code in your forms.py or any other file that is suitable to you.
Now the help_text will be rendered as a div element, which is a block-level element. You can place an unordered list ul inside and have a valid HTML.
Monkey patching isn't the most beautiful way of solving problems, but it is in my opinion a pragmatic way to overcome some tricky issues.
I think what you want is not exactly to "have an <ul> inside your help_text" but rather "display a bullet list inside your help text".
So if you don't have the ability to override as_table() or use something other than as_table(), I hope you are still able to change the stylesheet. In which case you can fake your ul with a span:
from django.utils.safestring import mark_safe
help_text=mark_safe(
'<span class="fake-ul">'
'<span class="fake-li">foo</span>'
'<span class="fake-li">bar</span>'
'</span>'
)
And here is your CSS:
.fake-ul {
display: block;
padding-left: 40px;
list-style-type: disc;
}
.fake-li {
display: list-item;
}
So probably it is too late, but I think you may find Django widget tweaks usefull.
The usual method for creating cross-references in LaTeX is to put a \label inside something you want to refer to later, and then use \ref. So for example, writing as we saw in Section~\ref{intro} in the LaTeX source might produce "as we saw in Section 1" in the final output. Is it possible to get the same effect using just HTML and CSS? Newer features of CSS allow sections and so on to be numbered automatically, but I haven't found anything that lets you reference these counter values from elsewhere in the document.
Here is a concrete example:
<!DOCTYPE html>
<html>
<head>
<title>Cross references</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: section;
}
section > h1::before {
counter-increment: section;
content: counter(section) ". ";
}
</style>
</head>
<body>
<section>
<h1 id="intro">Introduction</h1>
<p>Pineapples contain essential vitamins.</p>
</section>
<section>
<h1>Further discourse on pineapples</h1>
<p>As we saw in Section ??, pineapples contain essential vitamins.</p>
</section>
</body>
</html>
In this example, all the section headings are prepended with an automatically generated number. I would like to know if there is any HTML markup or CSS styling I could use in place of ?? that will insert the number corresponding to #intro.
I realize I could use <a href="#intro"> to create a cross-hyperlink to the Introduction, but I'd like to include the section number in the link text as well.
If this is not possible with HTML and CSS alone, are there any JavaScript libraries for adding cross-references within a document?
A better way for me to have phrased this question (in hindsight) would have been "How can you access content generated automatically by CSS without using JavaScript?", and that these questions are relevant:
Is it possible to access the content generated by a css :before rule?
How to access CSS generated content with JavaScript
It looks like accessing the automatically generated counter values is not easy even with JavaScript, and not possible without it, so that answers my question.
There are a number of documents from the W3C that discuss counters and generated content, but none as far as I could tell discuss referencing generated content from other parts of a document:
CSS Counter Styles Level 3
CSS Lists and Counters Module Level 3
CSS Generated and Replaced Content Module
There is a note in the W3C's List of suggested extensions to CSS that mentions exactly the cross-reference problem - it comes from an email written in 1998, and I haven't found any follow-up work, so I guess this wasn't a high priority.
Update
The CSS Generated Content for Paged Media Module discusses cross references explicitly, and describes the target-counter and target-text functions to implement them with CSS. However, this is a working draft dated 29 November 2011; these functions don't appear to be implemented in any major browser. An article from A List Apart talks about using these CSS features to produce PDF eBooks from HTML using some random propriety tools.
Is there a way to achieve Backspace functionality in HTML? Do we have any special tags for this?
An example showing the need for such a thing can be found in StackOverflow itself. Please refer to Get current stack trace in Java. In the top answer, #jinguiy is trying to express Thread.currentThread().getStackTrace() but because of the site's interpretation of links an unwanted space has been introduced.
If there is a way to include a backspace this can be avoided.
This is just one example, but in many contexts where we can't control certain part of the output, having a backspace functionality in HTML can be quite useful.
You can use a negative margin:
HTML:
<span>this is</span> <span class="backspace">a test</span>
CSS:
.backspace { margin-left: -4px; }
Demo: http://jsfiddle.net/Guffa/HsCPd/
HTML is stateless, so there is no possibility of backspace functionality with HTML alone. You could do something with javascript to achieve a similar effect.
Another approach, would be to buffer your output before sending it, and then process the buffered output. You could roll your own backspace tag, and then when processing the buffer, delete the backspace tag, and the character/tag before it.
As I know HTML has no tags to do it. You need to add some other language to your code to do such things.
I don't think there's such a functionality in HTML... but, depending on the effect you're trying to achieve (is it a matter of visualization only?), you could act on word-spacing or letter-spacing
You can also use other techniques, like setting a negative margin on the elements.
In the specific example you linked, the space is due to this rule in the CSS:
p code {
padding: 1px 5px;}
If you remove it with firebug, the space disappears, cause there isn't a space (try to copy and paste the text)
Instead, if the matter is that there are unwanted spaces in the text, you can try with javascript (here an example) or processing the text with a server side language
Gulta's answer is best. Here is how to do this all within your html source:
<!-- horizontal backspace; adjust the amount of space by changing 4px -->
<style type="text/css">span.backspace{margin-left: -4px}</style>
<!-- The above sets up a "backspace command" in html in the style css-->
this is<span class="backspace"></span>a test
<!-- which can be placed any where after, and will output
this isa test
-->
if you searching for simple and effective method to let user go back from your webpage
you can use this JavaScript code
head section
<script>
function goBack()
{
window.history.back()
}
</script>
and insert HTML in your body
<input type="button" value="Back" onclick="goBack()">
W3schools Source
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.