How to write Superscript in ReactJS in navigation bar - css

I am new to ReactJS and trying a simple portal page and stuck in a point. How to write a superscript in a navigation bar file.
I am reusing the existing project and need a way to write superscript to the text.
export const navHeader = { text: "Test Page", href: "/" };
How to get the result like Test Page ^ abc ( abc should be in power).

You can just use the sup HTML Element, or wrap the text in another element and use the vertical-align: super rule
Using Native HTML Element
<span>
Test Page
<sup>abc</sup>
</span>
Using CSS
<span>
Test Page
<span style={{ verticalAlign: "super" }}>abc</sup>
</span>

Related

Styling not parsed from backend

I have an application with an angular frontend and C# backend.
I'm receiving this rich text from the backend of my application:
<b>Hello <span style="font-weight:normal"> world </span></b>
What gets displayed is " Hello world "
What I want to be displayed is " Hello world "
The desired behaviour is that the styling of the span doesn't get overwritten. This codepen example shows the desired behaviour, but it is frontend ONLY:
https://codepen.io/david-lo/pen/rNVOEbY
What am I missing?
I solved my issue by using SafeHtml and DomSanitizer :
Before:
public txt: string; //txt is rendered in my html file.
#Input() public set header(_txt: string) {
this.txt = _txt;
}
The string input _txt has value <b>Hello <span style="font-weight:normal"> world </span></b>
The problem was that my span styling was ignored so the output would be:
Hello world
After:
public txt: SafeHtml;
#Input() public set header(_txt: string) {
this.txt= this.domSanitizer.bypassSecurityTrustHtml(_txt);
}
By using DomSanitizer the way shown above, my span styling was respected in the frontend and I achieved the desired output:
Hello world
Please Add below css
p {margin: auto; display: inline-block;}
If you are trying to render that code with the backslash symbols, this is clearly incorrect HTML.
The correct line should look like this:
<b>Hello <span style="font-weight:normal"> world </span></b>

Trying to extract HTML between two style elements with cheerio

I'm scraping an HTML page but I'm trying to get one section of the page. There are no classes, id's or anything super useful I can plug into Cheerio I feel like (I'm new to this, so I know my ignorance plays a part).
The code looks like this.
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
<hr style="width:90%; padding: 0>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<b> text I want </b>
<hr style="width:90%; padding: 0>
<b> Here's some text I don't want</b>
<b> More text I don't want</b>
Is there a way to grab the HTML between the two <hr> elements with Cheerio? Both elements are exactly the same.
You can start at the first hr and iterate next() until you get to the second one:
let el = $('hr').first()
while(el = el.next()){
if(el.length === 0 || el.prop('tagName') === 'HR') break
text += el.text() + "\n"
}
If you can ascertain which nth to use you could try nth-of-type selector e.g.
hr:nth-of-type(1)
You might also be able to use nth-child

Custom styling of text substrings in dynamic Angular templates

Is it possible to apply styles like bold / italic or both together in angular 6 by just having starting and ending point of the text while creating or after creating the components dynamically ? Right now I'm able to apply styles for the whole component but i wanted to apply style only for a particular text in the element and the length of the text will be from JSON.
Please find stackblitz implementation here.
Actual result should apply the style to text based on the offset and length
Yes, you should be able to achieve this with a conditional ngStyle statement, based on the length of the text string, or other criteria. E.g. apply bold and italic styling if your text string is longer than 20 characters:
<div [ngStyle]="textString.length > 20 && {'font-weight': 'bold', 'font-style': 'italic'}">{{textString}}</div>
Further information here and here is an example on Stackblitz.
Alternatively you can apply ngClass conditionally in the same way, and have your custom styling in your CSS file.
Method 1 - Slice Pipe
If you want to add styling based on character positions within some text, rather than the overall length of some text, and you want to do this purely in your HTML template, you could achieve this with the slice pipe.
I've put an example of how this could be applied below and on Stackblitz. The HTML markup is horrible, and line breaks must not be used in the code because these introduce unwanted spaces into the rendered text, but I believe it covers what you're asking for:
For a single highlight:
TS:
singleString = 'London Kings Cross Station';
highlightStart = 3;
highlightLength = 5;
HTML:
<ng-container>{{singleString | slice:0:highlightStart}}</ng-container>
<span class="styled_text">{{singleString | slice:highlightStart:highlightStart+highlightLength}}</span>
<ng-container>{{singleString | slice:highlightStart+highlightLength:singleString.length}}</ng-container>
For multiple highlights:
TS:
textStrings = ['London Kings Cross', 'Bristol Temple Meads'];
stylePositions = [[3,3],[15,3]]; // Start position and length of sections to be styled
HTML:
<ul>
<li *ngFor="let textString of textStrings">
<ng-container *ngFor="let stylePosition of stylePositions; index as i">
<ng-container *ngIf="i==0">{{textString | slice:0:stylePositions[0][0]}}</ng-container><ng-container *ngIf="i!=0">{{textString | slice:stylePositions[i-1][0]+stylePositions[i-1][1]:stylePositions[i][0]}}</ng-container><span class="styled_text">{{textString | slice:stylePositions[i][0]:stylePositions[i][0]+stylePositions[i][1]}}</span><ng-container *ngIf="i==stylePositions.length-1">{{textString | slice:stylePositions[i][0]+stylePositions[i][1]:textString.length}}</ng-container>
</ng-container>
</li>
</ul>
CSS:
.styled_text {
font-weight: bold;
font-style: italic;
color: #ff0000;
}
Method 2 - Inner HTML
A different approach would be to apply the same principle, but use a function to break your string into sections and then pass this to a div in your template using innerHTML - see below and this Stackblitz.
Please note that for this to work, you must also include a custom pipe to declare the HTML as safe for Angular to render with styling. This is also included in the Stackblitz, with more details here.
styleText(string){
let styledText= '';
for (let i = 0; i < this.stylePositions.length; i++) {
if(i==0){
styledText+=string.substring(0, this.stylePositions[i][0]);
} else {
styledText+=string.substring(this.stylePositions[i-1][0]+this.stylePositions[i-1][1],this.stylePositions[i][0]);
}
styledText+='<span style="color:#ff0000">'+string.substring(this.stylePositions[i][0],this.stylePositions[i][0]+this.stylePositions[i][1])+'</span>';
if(i==this.stylePositions.length-1){
styledText+=string.substring(this.stylePositions[i][0]+this.stylePositions[i][1],string.length);
}
}
return styledText;
}

Turn text to link by css

Is it possible to convert a text to link by its id in CSS.
<span id="text">A text</span>
Change above text by CSS to a link like this:
<span id="text">A text</span>
This is not possible to do via CSS
Links are considered content, which is separate from presentation (CSS). This is by design. Content like this can only be added to the page by modifying the DOM - either dynamically in the browser via JavaScript and/or by changing the HTML returned from server-side code.
To do specifically what you are asking for, you could use JavaScript like this...
const el = document.getElementById('text')
el.innerHTML = `${el.textContent}`
<span id="text">A text</span>
...but this is often better:
const parentElement = document.getElementById('text')
const newElement = Object.assign(document.createElement('a'), {
href: 'example.org',
textContent: parentElement.textContent
})
parentElement.textContent = ''
parentElement.appendChild(newElement)
<span id="text">A text</span>
It may look more complicated than el.innerHTML='...', but this way doesn't need to be parsed, so it is the faster approach.
If you need to manipulate HTML you can do by JavaScript but there's no way to do this with css.
Example
document.getElementById('your id').innerHTML = '';
You can find more here

How to create button without icon in CKEditor

When I create toolbar button in CKEditor 3.0 with following code I need to uncomment icon property to get button visible. Otherwise space is occupied but no label is shown. When I hover over it I get caption popping up.
editor.ui.addButton('customButton', {
label: 'Custom Action',
//icon: this.path + 'images/anchor.gif',
command: commandName
});
Do you know how to create toolbar button without icon? Just a pure text.
An easier way is that CKEditor creates a CSS class on your custom label automatically called:
cke_button_<command>
For example, if your command for the button was called 'myCommand', and you set 'label: 'My Command', then CK would render something like:
<a id="cke_27" class="cke_off cke_button_myCommand" ....>
...
<span id="cke_27_label" class="cke_label">My Command</span>
</a>
Therefore (assuming you are using the 'kama' skin - substitute for your skin if not), you can use the following CSS to override the cke_label ==> display:none
.cke_skin_kama .cke_button_myCommand .cke_label {
display: inline;
}
Voila.
This is how I did it. A button looks like this:
<span class="cke_button">
<a id="cke_..." class="cke_off cke_button_cmd" ...>
<span class="cke_icon"/>
<span class="cke_label">Label</span>
</a>
</span>
.cke_label is styled "display:none" by default. This would do exactly what we want:
<span style="display:none;" class="cke_icon"/>
<span style="display:inline;" class="cke_label">Label</span>
So the selectors are a bit tricky, put this in the Style Tag on the page with the editor:
<style type="text/css">
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_icon{display:none !important;}
.cke_skin_kama .cke_button_CMDNAMEHERE span.cke_label{display:inline;}
</style>
The ckeditor authors applied css to get the label on the source button (presets.css):
/* "Source" button label */
.cke_skin_kama .cke_button_source .cke_label
{
display: inline;
}

Resources