Я пытаюсь создать инструмент для создания амбиграмм, который показывает текст заглавными буквами и какой-либо другой шрифт как правой, так и верхней стороной вниз. Мне удалось это сделать, но расстояние между словами очень большое. Есть ли какой-нибудь способ сделать его близким к нулю? Я попытался добавить некоторые поля к css, но, похоже, это игнорируется.
Это сделано как плагин для wordpress. Вы можете увидеть его здесь: https://makeambigrams.com/demo/
<?php
add_shortcode( 'worder', 'worder_print_html' );
function worder_print_html( ) {
wp_enqueue_script('worder-script');
ob_start();
?>
<div class="the_worder_contaienr">
<form method="post" id="word-er-form" name="word-er-form">
<input type="text" name="word_er_word" id="word_er_word" value="" /> <br>
<input type="submit" value="Generate" />
</form>
<div id="the_result">
</div>
</div>
<style>
.the_worder_contaienr {
text-align: center;
margin:0
margin-top: -20px;
}
.the_worder_contaienr input{
margin:0
}
p.origgina_other_font, .upside_down_font p {
font-family: serif;
margin:0
margin-top: -20px;
}
.upside_down_uppwe,.upside_down,.upside_down_font {
transform: scaleY(-1);
margin:0
margin-top: -20px;
}
</style>
<?php
//$output = ob_end_clean();
return ob_get_clean();
//return "foo = {$atts['foo']}";
}
function the_worder_jquery() {
wp_register_script( 'worder-script', plugin_dir_url( __FILE__ ) . '/custom.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'the_worder_jquery' );
js
(function($) {
$('#word-er-form').on('submit', function() {
event.preventDefault();
var the_input = $('#word_er_word').val().toLowerCase();
var the_characters = the_input.split('');
console.table(the_characters);
var the_original = $('#word_er_word').val();
var the_upper_case = the_input.toUpperCase();
var the_revese_case = the_characters.reverse().toString().replace(/,/g, "");;
console.log(the_original);
console.log(the_upper_case);
console.log(the_revese_case);
var the_result = '<p class="original">'+the_input+'</p>';
the_result += '<p class="original_capitalize">'+the_upper_case+'</p>';
the_result += '<p class="origgina_other_font">'+the_input+'</p>';
the_result += '<div class="upside_down_font"><p>'+the_revese_case+'</p></div>';
the_result += '<div class="upside_down_uppwe"><p>'+the_revese_case.toUpperCase()+'</p></div>';
the_result += '<div class="upside_down"><p>'+the_revese_case+'</p></div>';
$('#the_result').html(the_result);
})
})( jQuery );