Does Laravel 5.3 blade supports tag?

Question

When I type

<font> test </font>

in laravel blade file nothing is rendered in chrome.

Edit: please dont just advise not to use font tag, read the whole question. This font tag is generated by wysiwyg editor summernote so its not my choice to use it or not.

Weird thing is that I see this tag in page source but its not rendered on the page. When I make local html file with same source - it shows text within font tags in Chrome. Also when I go to developer tools elements and click on container div to edit as html, if I add anything anywhere, then all the font tags suddenly show up. Behavior is exactly the same in Firefox. If I dont edit page in inspector font tags are not shown no matter how many times I refresh.

here is my blade file:

@extends('layouts.app')


@section('content')
    <font> test </font>
    <p> <a href="/articles"><-Back</a></p>
    <p> Selected article: {{$article->title}} </p>
    <p> Description: {{$article->description}} </p>
    <p><img src="/{{$article->image}}" width="600px" alt="ASD"></p>
    <font> ojo  </font>
    {!! $article->body !!}
    <p>ge?</p>
@stop

I guess you know it, but if you dont.. the tag is no longer supported in HTML 5. Maybe this is the reason you get errors. — GabMic
to elaborate GrowingDev, read this @pera : w3schools. Also, it is better of to use CSS with  instead. — Bagus Tesa
Basically, all html tags supported in blade file. But, your issue is not related with blade. is no longer supported in HTML5 — 502_Geek
font tag is generated by wysiwyg editor summernote. although its not supported in html5, all browsers are still showing it. please read through and try to find explanation for this peculiar situation. — pera

Casper Spruit Casper Spruit · Accepted Answer · 2016-12-01T10:07:37

The  was deprecated in HTML 4.01 at the same time as all elements related to styling only, then obsoleted in HTML5. This has nothing to do with laravel.

The former behavior of the  element can be achieved, and even better controlled using the CSS Fonts CSS properties

See more information on  here.

EDIT

I got your question wrong, http://summernote.org/ is generating the  tag. You could replace it every time the summernote gets input. Like this:

(May need some adjustments)

//some dynamic elements have to be triggered from the body
$body = $(document.body);

//container where font excists
$container = $('.container')

//less code to type
function observe(element, event, handler) {
  $body.on(event, element, handler)
}

//delay 0 to speed up
function delay_func() {
  window.setTimeout(font_to_span(), 0);
}

//replace font tags with span and extract the font family
function font_to_span() {
  $font = $container.find('font');
  font_family = $font.attr('face');
  $font.replaceWith(function() {
    return $("<span />", {
      html: $(this).html(),
      style: 'font-family:' + font_family + ';'
    });
  });
}

//add events to trigger font finder_to_span on
observe($container, 'change', font_to_span);
observe($container, 'cut', delay_func);
observe($container, 'paste', delay_func);
observe($container, 'drop', delay_func);
observe($container, 'keydown', delay_func);
font_to_span();

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce feugiat, sapien sed tempor dignissim, mi metus tempor enim, <font face="Comic Sans MS">a vestibulum nulla tortor</font> posuere tellus. Etiam eu dolor ut dui viverra dictum non non justo. Duis
  blandit in enim vitae mollis. Integer euismod lectus ut turpis fermentum, eget rutrum urna ornare.</div>

Does Laravel 5.3 blade supports <font> tag?

2 Answers